<?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/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Sundaresh's</title>
	<atom:link href="http://sundareshln.wordpress.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://sundareshln.wordpress.com</link>
	<description>HTML,CSS,Interaction Design,Usability</description>
	<lastBuildDate>Tue, 17 May 2011 10:06:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='sundareshln.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://s2.wp.com/i/buttonw-com.png</url>
		<title>Sundaresh's</title>
		<link>http://sundareshln.wordpress.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://sundareshln.wordpress.com/osd.xml" title="Sundaresh&#039;s" />
	<atom:link rel='hub' href='http://sundareshln.wordpress.com/?pushpress=hub'/>
		<item>
		<title>Free Mobile Email ID for Mobile Phones via Email@Mobile</title>
		<link>http://sundareshln.wordpress.com/2008/05/22/eamilatmobile/</link>
		<comments>http://sundareshln.wordpress.com/2008/05/22/eamilatmobile/#comments</comments>
		<pubDate>Thu, 22 May 2008 08:35:21 +0000</pubDate>
		<dc:creator>sundareshln</dc:creator>
				<category><![CDATA[Techgadgets]]></category>
		<category><![CDATA[Add new tag]]></category>

		<guid isPermaLink="false">http://sundareshln.wordpress.com/?p=10</guid>
		<description><![CDATA[To access your Emails on Mobile is the modern method of staying in tuned with the latest information available in your mail box. Millions of mobile workers have an inherent need for remote access to their emails in order to successfully transact business outside traditional workplaces at all times. Today, besides the top management there [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=10&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><span style="font-size:x-small;">To access your Emails on Mobile is the modern method of staying in tuned with the latest information available in your mail box. Millions of mobile workers have an inherent need for remote access to their emails in order to successfully transact business outside traditional workplaces at all times. </span></p>
<p>Today, besides the top management there are other employees in an organization who have this need to read, compose and send emails while they are on the move. It is very difficult for them to rush to their offices every time just to access their emails on their P.C.</p>
<p>Moreover the company cannot afford to give an expensive mobile phone or laptop to all its employees with which they can remain connected with their colleagues, employers, customers, suppliers and other resources.</p>
<p>This has created an indispensable &#8220;need&#8221; for such email solutions which enable mobile users to access their email accounts over their ordinary mobile handsets.</p>
<p>Earlier this facility was available only on very high end mobile phones requiring Enterprise Servers to integrate with existing email platforms. Huge investments had to be made in buying high hand helds or paying huge monthly subscriptions to mobile service providers and above all limited choice of handsets.</p>
<p>But with the advent of new email solutions, now every mobile user can access his emails over his ordinary mobile phone which is capable of internet browsing and that too at a very cost effective rate.</p>
<p> </p>
<p>For More Information Visit <a href="http://www.emailatmobile.com">www.emailatmobile.com</a></p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/sundareshln.wordpress.com/10/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/sundareshln.wordpress.com/10/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/sundareshln.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/sundareshln.wordpress.com/10/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/sundareshln.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/sundareshln.wordpress.com/10/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/sundareshln.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/sundareshln.wordpress.com/10/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/sundareshln.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/sundareshln.wordpress.com/10/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/sundareshln.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/sundareshln.wordpress.com/10/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/sundareshln.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/sundareshln.wordpress.com/10/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/sundareshln.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/sundareshln.wordpress.com/10/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=10&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://sundareshln.wordpress.com/2008/05/22/eamilatmobile/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/38335a4344211a41e01e48639f86f795?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">sundareshln</media:title>
		</media:content>
	</item>
		<item>
		<title>FancyForm</title>
		<link>http://sundareshln.wordpress.com/2008/05/14/fancyform/</link>
		<comments>http://sundareshln.wordpress.com/2008/05/14/fancyform/#comments</comments>
		<pubDate>Wed, 14 May 2008 08:31:19 +0000</pubDate>
		<dc:creator>sundareshln</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://sundareshln.wordpress.com/?p=9</guid>
		<description><![CDATA[Overview FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It&#8217;s accessible, easy to use and degrades gracefully on all older, non-supporting browsers. Click on the below link to view http://lipidity.com/fancy-form/    <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=9&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<h2>Overview</h2>
<p class="lead">FancyForm is a <em>powerful</em> checkbox replacement script used to provide the ultimate <em>flexibility</em> in changing the appearance and function of <acronym title="Hyper-Text Markup Language">HTML</acronym> form elements. It&#8217;s accessible, <em>easy</em> to use and <em>degrades gracefully</em> on all older, non-supporting browsers.</p>
<p>Click on the below link to view<br />
<a href="http://lipidity.com/fancy-form/">http://lipidity.com/fancy-form/</a></p>
<p> </p>
<p> </p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/sundareshln.wordpress.com/9/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/sundareshln.wordpress.com/9/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/sundareshln.wordpress.com/9/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/sundareshln.wordpress.com/9/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/sundareshln.wordpress.com/9/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/sundareshln.wordpress.com/9/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/sundareshln.wordpress.com/9/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/sundareshln.wordpress.com/9/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/sundareshln.wordpress.com/9/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/sundareshln.wordpress.com/9/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/sundareshln.wordpress.com/9/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/sundareshln.wordpress.com/9/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/sundareshln.wordpress.com/9/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/sundareshln.wordpress.com/9/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/sundareshln.wordpress.com/9/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/sundareshln.wordpress.com/9/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=9&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://sundareshln.wordpress.com/2008/05/14/fancyform/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/38335a4344211a41e01e48639f86f795?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">sundareshln</media:title>
		</media:content>
	</item>
		<item>
		<title>CSS 3 Preview</title>
		<link>http://sundareshln.wordpress.com/2008/05/13/css-3-preview/</link>
		<comments>http://sundareshln.wordpress.com/2008/05/13/css-3-preview/#comments</comments>
		<pubDate>Tue, 13 May 2008 09:18:01 +0000</pubDate>
		<dc:creator>sundareshln</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://sundareshln.wordpress.com/?p=8</guid>
		<description><![CDATA[Here is a preview of the new properties introduced in CSS 3. Borders border-color border-image border-radius box-shadow   Backgrounds background-origin background-clip background-size layering multiple background images   Color HSL colors HSLA colors RGBA colors opacity   Text text-shadow text-overflow   Interface box-sizing resize   Selectors attribute selectors   Format media queries multiple column layout speech [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=8&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>Here is a preview of the new properties introduced in CSS 3.</p>
<h2><strong>Borders</strong></h2>
<li>border-color</li>
<li>border-image</li>
<li>border-radius</li>
<li>box-shadow</li>
<p> </p>
<h2><strong>Backgrounds</strong></h2>
<li>background-origin</li>
<li>background-clip</li>
<li>background-size</li>
<li>layering multiple background images</li>
<p> </p>
<h2><strong>Color</strong></h2>
<li>HSL colors</li>
<li>HSLA colors</li>
<li>RGBA colors</li>
<li>opacity</li>
<p> </p>
<h2><strong>Text</strong></h2>
<li>text-shadow</li>
<li>text-overflow</li>
<p> </p>
<h2><strong>Interface</strong></h2>
<li>box-sizing</li>
<li>resize</li>
<p> </p>
<h2><strong>Selectors</strong></h2>
<li>attribute selectors</li>
<p> </p>
<h2><strong>Format</strong></h2>
<li>media queries</li>
<li>multiple column layout</li>
<li>speech</li>
<p>Source : <span class="a"><a href="http://www.w3.org">www.w3.org</a></span></p>
<p> </p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/sundareshln.wordpress.com/8/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/sundareshln.wordpress.com/8/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/sundareshln.wordpress.com/8/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/sundareshln.wordpress.com/8/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/sundareshln.wordpress.com/8/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/sundareshln.wordpress.com/8/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/sundareshln.wordpress.com/8/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/sundareshln.wordpress.com/8/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/sundareshln.wordpress.com/8/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/sundareshln.wordpress.com/8/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/sundareshln.wordpress.com/8/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/sundareshln.wordpress.com/8/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/sundareshln.wordpress.com/8/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/sundareshln.wordpress.com/8/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/sundareshln.wordpress.com/8/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/sundareshln.wordpress.com/8/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=8&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://sundareshln.wordpress.com/2008/05/13/css-3-preview/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/38335a4344211a41e01e48639f86f795?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">sundareshln</media:title>
		</media:content>
	</item>
		<item>
		<title>Introduction to Usability (Jakob Nielsen)</title>
		<link>http://sundareshln.wordpress.com/2008/05/12/introduction-to-usability-jakob-nielsen/</link>
		<comments>http://sundareshln.wordpress.com/2008/05/12/introduction-to-usability-jakob-nielsen/#comments</comments>
		<pubDate>Mon, 12 May 2008 07:27:39 +0000</pubDate>
		<dc:creator>sundareshln</dc:creator>
				<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://sundareshln.wordpress.com/?p=7</guid>
		<description><![CDATA[Summary: How to define usability? How, when, and where can you improve it? Why should you care? This overview answers these basic questions. This is the article to give to your boss or anyone else who doesn&#8217;t have much time, but needs to know the basic usability facts. What (Definition of Usability) Usability is a [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=7&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<blockquote><p><strong>Summary:</strong><br />
How to define usability? How, when, and where can you improve it? Why should you care? This overview answers these basic questions.</p></blockquote>
<p>This is the article to give to your boss or anyone else who doesn&#8217;t have much time, but needs to know the basic usability facts.</p>
<h2>What (Definition of Usability)</h2>
<p>Usability is a <strong>quality attribute</strong> that assesses how easy user interfaces are to use. The word &#8220;usability&#8221; also refers to methods for improving ease-of-use during the design process.</p>
<p>Usability is defined by five quality components:</p>
<ul>
<li><strong>Learnability</strong>: How easy is it for users to accomplish basic tasks the first time they encounter the design?</li>
<li><strong>Efficiency</strong>: Once users have learned the design, how quickly can they perform tasks?</li>
<li><strong>Memorability</strong>: When users return to the design after a period of not using it, how easily can they reestablish proficiency?</li>
<li><strong>Errors</strong>: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?</li>
<li><strong>Satisfaction</strong>: How pleasant is it to use the design?</li>
</ul>
<p>There are many other important quality attributes. A key one is <strong>utility</strong>, which refers to the design&#8217;s functionality: Does it do what users need? Usability and utility are equally important: It matters little that something is easy if it&#8217;s not what you want. It&#8217;s also no good if the system can hypothetically do what you want, but you can&#8217;t make it happen because the user interface is too difficult. To study a design&#8217;s utility, you can use the same user research methods that improve usability.</p>
<h2>Why Usability is Important</h2>
<p>On the Web, usability is a necessary condition for survival. If a website is difficult to use, people <strong>leave</strong>. If the <a class="old" title="Top Ten Guidelines for Homepage Usability" href="http://www.useit.com/alertbox/20020512.html">homepage</a> fails to clearly state what a company offers and what users can do on the site, people <strong>leave</strong>. If users get lost on a website, they <strong>leave</strong>. If a website&#8217;s information is hard to read or doesn&#8217;t answer users&#8217; key questions, they <strong>leave</strong>. Note a pattern here? There&#8217;s no such thing as a user reading a website manual or otherwise spending much time trying to figure out an interface. There are plenty of other websites available; leaving is the first line of defense when users encounter a difficulty.</p>
<p>The first law of <a class="old" title="Did Poor Usability Kill E-Commerce?" href="http://www.useit.com/alertbox/20010819.html">e-commerce</a> is that if users cannot <em>find</em> the product, they cannot <em>buy</em> it either.</p>
<p>For <strong>intranets</strong>, usability is a matter of <a class="old" title="The Trillion-Dollar Question" href="http://www.useit.com/alertbox/20021111.html">employee productivity</a>. Time users waste being lost on your intranet or pondering difficult instructions is money you waste by paying them to be at work without getting work done.</p>
<p>Current best practices call for spending about <strong>10% of a design project&#8217;s budget</strong> on usability. On average, this will more than <a class="old" title="Return on Investment (ROI) for Usability" href="http://www.useit.com/alertbox/roi.html">double a website&#8217;s desired quality metrics</a> and slightly less than double an intranet&#8217;s quality metrics. For software and physical products, the improvements are typically smaller — but still substantial — when you emphasize usability in the design process.</p>
<p>For internal design projects, think of doubling usability as cutting training budgets in half and doubling the number of transactions employees perform per hour. For external designs, think of doubling sales, doubling the number of registered users or customer leads, or doubling whatever other desired goal motivated your design project.</p>
<h2>How to Improve Usability</h2>
<p>There are many methods for studying usability, but the most basic and useful is <strong>user testing</strong>, which has three components:</p>
<ul>
<li>Get hold of some <strong><a class="old" title="Recruiting Test Participants for Usability Studies" href="http://www.useit.com/alertbox/20030120.html">representative users</a></strong>, such as customers for an e-commerce site or employees for an intranet (in the latter case, they should work outside your department).</li>
<li>Ask the users to perform <strong>representative tasks</strong> with the design.</li>
<li><strong>Observe</strong> what the users do, where they succeed, and where they have difficulties with the user interface. Shut up and let the users do the talking.</li>
</ul>
<p>It&#8217;s important to test users individually and let them solve any problems on their own. If you help them or direct their attention to any particular part of the screen, you have contaminated the test results.</p>
<p>To identify a design&#8217;s most important usability problems, <a class="old" title="Why You Only Need to Test With 5 Users" href="http://www.useit.com/alertbox/20000319.html">testing five users</a> is typically enough. Rather than run a big, expensive study, it&#8217;s a better use of resources to run many small tests and revise the design between each one so you can fix the usability flaws as you identify them. Iterative design is the best way to increase the quality of user experience. The more versions and interface ideas you test with users, the better.</p>
<p>User testing is different from <a class="old" title="The Use and Misuse of Focus Groups" href="http://www.useit.com/papers/focusgroups.html">focus groups</a>, which are a poor way of evaluating design usability. Focus groups have a place in market research, but to evaluate interaction designs you must closely observe individual users as they perform tasks with the user interface. <a class="old" title="First Rule of Usability? Don't Listen to Users" href="http://www.useit.com/alertbox/20010805.html">Listening to what people say</a> is misleading: you have to watch what they actually do.</p>
<h2>When to Work on Usability</h2>
<p>Usability plays a role in each stage of the design process. The resulting need for multiple studies is one reason I recommend making individual studies fast and cheap. Here are the main steps:</p>
<ol>
<li>Before starting the new design, <strong>test the old design</strong> to identify the good parts that you should keep or emphasize, and the bad parts that give users trouble.</li>
<li>Unless you&#8217;re working on an intranet, <strong>test your competitors&#8217; designs</strong> to get cheap data on a range of alternative interfaces that have similar features to your own. (If you work on an intranet, read the <a class="old" title="list of intranet usability reports" href="http://www.nngroup.com/reports/intranet/">intranet design annuals</a> to learn from other designs.)</li>
<li>Conduct a <strong>field study</strong> to see how users behave in their natural habitat.</li>
<li>Make <strong><a class="new" title="Paper Prototyping - A How-To Video" href="http://www.nngroup.com/reports/prototyping/">paper prototypes</a></strong> of one or more new design ideas and test them. The less time you invest in these design ideas the better, because you&#8217;ll need to change them all based on the test results.</li>
<li>Refine the design ideas that test best through <strong>multiple iterations</strong>, gradually moving from low-fidelity prototyping to high-fidelity representations that run on the computer. Test each iteration.</li>
<li>Inspect the design relative to <strong><a class="old" title="list of usability guidelines reports" href="http://www.nngroup.com/reports/">established usability guidelines</a></strong>, whether from your own earlier studies or published research.</li>
<li>Once you decide on and implement the <strong>final design</strong>, test it again. Subtle usability problems always creep in during implementation.</li>
</ol>
<p>Don&#8217;t defer user testing until you have a fully implemented design. If you do, it will be impossible to fix the vast majority of the critical usability problems that the test uncovers. Many of these problems are likely to be structural, and fixing them would require major rearchitecting.</p>
<p>The only way to a high-quality user experience is to start user testing early in the design process and to keep testing every step of the way.</p>
<h2>Where to Test</h2>
<p>If you run at least one user study per week, it&#8217;s worth building a dedicated usability laboratory. For most companies, however, it&#8217;s fine to conduct tests in a conference room or an office — as long as you can close the door to keep out distractions. What matters is that you get hold of real users and sit with them while they use the design. A notepad is the only equipment you need.</p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/sundareshln.wordpress.com/7/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/sundareshln.wordpress.com/7/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/sundareshln.wordpress.com/7/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/sundareshln.wordpress.com/7/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/sundareshln.wordpress.com/7/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/sundareshln.wordpress.com/7/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/sundareshln.wordpress.com/7/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/sundareshln.wordpress.com/7/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/sundareshln.wordpress.com/7/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/sundareshln.wordpress.com/7/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/sundareshln.wordpress.com/7/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/sundareshln.wordpress.com/7/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/sundareshln.wordpress.com/7/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/sundareshln.wordpress.com/7/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/sundareshln.wordpress.com/7/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/sundareshln.wordpress.com/7/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=7&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://sundareshln.wordpress.com/2008/05/12/introduction-to-usability-jakob-nielsen/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/38335a4344211a41e01e48639f86f795?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">sundareshln</media:title>
		</media:content>
	</item>
		<item>
		<title>Override Inline Styles from the Stylesheet</title>
		<link>http://sundareshln.wordpress.com/2008/05/12/override-inline-styles-from-the-stylesheet/</link>
		<comments>http://sundareshln.wordpress.com/2008/05/12/override-inline-styles-from-the-stylesheet/#comments</comments>
		<pubDate>Mon, 12 May 2008 07:17:22 +0000</pubDate>
		<dc:creator>sundareshln</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://sundareshln.wordpress.com/?p=6</guid>
		<description><![CDATA[You read that right. I said override inline styles, and no, I have not been drinking. For the longest time it has bugged me that there was no way to override what someone else had done with inline styles. I understand they’re supposed to be the override, and I get why, to a certain extent, [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=6&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><span style="font-size:10pt;font-family:Calibri;">You read that right. I said override inline styles, and no, I have not been drinking. For the longest time it has bugged me that there was no way to override what someone else had done with inline styles. I understand they’re supposed to <em><span style="font-family:Calibri;">be</span></em> the override, and I get why, to a certain extent, but I also think there should be an override to certain overrides when those overrides are abused. Make sense?</span></p>
<h2 style="margin:auto 0;"><span style="font-size:10pt;font-family:Calibri;">Why the need to override them at all?</span></h2>
<p><span style="font-size:10pt;font-family:Calibri;">Mostly it has to do with my own curiosity and the “can it be done” approach with which I come at everything, but I have had a few clients over the years who (bless their hearts) love to get a little creative styling their articles. One will add a bright green paragraph, centered in some font that might as well be comic sans, or another will use an </span><code><span style="font-size:10pt;font-family:Calibri;">h1</span></code><span style="font-size:10pt;font-family:Calibri;"> to make the text really big and then style it bold florescent something. All of this, of course, is done within the confines of my nicely styled template I just built for them (and which they paid for).</span></p>
<p><span style="font-size:10pt;font-family:Calibri;">To be fair, in <em><span style="font-family:Calibri;">most</span></em> of these cases, it’s the CMS doing the dirty work. They’re just clicking a button to make something bigger or more colorful and WordPress (typically) or another CMS engine is working behind the scenes, adding a span usually, with a style applied. Occasionally, the CMS will add a style to a heading or a paragraph, but in most cases, the following will solve the problem (or <em><span style="font-family:Calibri;">prevent</span></em> the problem):</span></p>
<p><span style="font-size:10pt;font-family:Calibri;">UPDATE: Stuart and John say a simple </span><code><span style="font-size:10pt;font-family:Calibri;">[style]</span></code><span style="font-size:10pt;font-family:Calibri;"> will work and include IE7&amp;8 too! &#8211; check out the comments for more suggestions and improvements to this solution. Nathan had a good idea for covering all the bases.</span></p>
<pre><span style="font-family:Calibri;"><span style="font-size:x-small;">/* override inline styles */</span></span>
<span style="font-family:Calibri;"><span style="font-size:x-small;">span[style]{</span></span>
<span style="font-family:Calibri;"><span style="font-size:x-small;"><span>    </span>color: inherit !important;</span></span>
<span style="font-family:Calibri;"><span style="font-size:x-small;"><span>    </span>font-size: inherit !important;</span></span>
<span style="font-family:Calibri;"><span style="font-size:x-small;">}</span></span></pre>
<h3 style="margin:auto 0;"><span style="font-size:10pt;font-family:Calibri;">Explanation</span></h3>
<p><span style="font-size:10pt;font-family:Calibri;">The first line tells the browser (any browser that’s listening, that is) to look for any span element </span><code><span style="font-size:10pt;font-family:Calibri;">span</span></code><span style="font-size:10pt;font-family:Calibri;"> with a style attribute </span><code><span style="font-size:10pt;font-family:Calibri;">[style</span></code><span style="font-size:10pt;font-family:Calibri;"> containing anything </span><code><span style="font-size:10pt;font-family:Calibri;">^=""]</span></code><span style="font-size:10pt;font-family:Calibri;"> and then stop and do the following </span><code><span style="font-size:10pt;font-family:Calibri;">{</span></code><span style="font-size:10pt;font-family:Calibri;">.</span></p>
<p><span style="font-size:10pt;font-family:Calibri;">Then, I tell it to </span><code><span style="font-size:10pt;font-family:Calibri;">inherit</span></code><span style="font-size:10pt;font-family:Calibri;"> the color and font-size from its parent element. The browser (a smart one, mind you) will work backwards up the cascade and find the last styled element with a color or font size applied and use that instead. By declaring it </span><code><span style="font-size:10pt;font-family:Calibri;">!important</span></code><span style="font-size:10pt;font-family:Calibri;"> I’ve told the browser to ignore anything except this declaration I’ve just made.</span></p>
<p><span style="font-size:10pt;font-family:Calibri;">Of course, change span to any other element that may have a style to it. For that matter, you could likely control <em><span style="font-family:Calibri;">any</span></em> attribute of <em><span style="font-family:Calibri;">any</span></em> element on the page using this same technique, no?</span></p>
<h2 style="margin:auto 0;"><span style="font-size:10pt;font-family:Calibri;">How this came about?</span></h2>
<p><span style="font-size:10pt;font-family:Calibri;">I have been using this technique on links for a couple of years now. I forget now where I picked it up, but it was originally used to style external links: </span><code><span style="font-size:10pt;font-family:Calibri;">a[href^="http://"]</span></code><span style="font-size:10pt;font-family:Calibri;"> will allow you to style external links separately so long as your internal links are relative urls.</span></p>
<p><span style="font-size:10pt;font-family:Calibri;">Then I saw the technique again around the same time, being used by <a href="http://alistapart.com/">A List Apart</a> to call out the href contents in a print stylesheet (print this page and you’ll see I’ve done this on my site as well):</span></p>
<pre><span style="font-family:Calibri;"><span style="font-size:x-small;">.storycontent a[href]:after {</span></span>
<span style="font-family:Calibri;"><span style="font-size:x-small;"><span>    </span>content: "&lt;" attr(href) "&gt;";</span></span>
<span style="font-family:Calibri;"><span style="font-size:x-small;"><span>    </span>font-size: 85%;</span></span>
<span style="font-family:Calibri;"><span style="font-size:x-small;"><span>    </span>text-decoration:none;</span></span>
<span style="font-family:Calibri;"><span style="font-size:x-small;">}</span></span></pre>
<p><span style="font-size:10pt;font-family:Calibri;">So today, while I was watching the Chronicles of Narnia (of all things) with the girls, it occurred to me that this could possibly be used to fix my inline style override issue. During a commercial I tried it out and by the end of the commercial I was on my way to this blog post.</span></p>
<h2 style="margin:auto 0;"><span style="font-size:10pt;font-family:Calibri;">Browsers?</span></h2>
<p><span style="font-size:10pt;font-family:Calibri;">Of course, just like the link trick mentioned above, this works in nearly every browser except IE 6. I’m told IE 7 &amp; 8 will work with the change above.</span></p>
<h3 style="margin:auto 0;"><span style="font-size:10pt;font-family:Calibri;">Good to go</span></h3>
<ul type="disc">
<li class="MsoNormal"><span style="font-size:10pt;font-family:Calibri;">Safari 3 Mac </span></li>
<li class="MsoNormal"><span style="font-size:10pt;font-family:Calibri;">Firefox 1.5 Mac and PC </span></li>
<li class="MsoNormal"><span style="font-size:10pt;font-family:Calibri;">Opera 9.5 </span></li>
<li class="MsoNormal"><span style="font-size:10pt;font-family:Calibri;">IE 7 </span></li>
<li class="MsoNormal"><span style="font-size:10pt;font-family:Calibri;">IE 8 </span></li>
</ul>
<h3 style="margin:auto 0;"><span style="font-size:10pt;font-family:Calibri;">No dice, no surprise</span></h3>
<ul type="disc">
<li class="MsoNormal"><span style="font-size:10pt;font-family:Calibri;">IE 6 </span></li>
</ul>
<h2 style="margin:auto 0;"><span style="font-size:10pt;font-family:Calibri;">On the bright side…</span></h2>
<p><span style="font-size:10pt;font-family:Calibri;">This isn’t something that is necessary in every browser anyway, it’s just an extra thing that can come in handy, and I hope you’ll find some (productive) use for it yourselves.</span></p>
<p><span style="font-size:10pt;font-family:Calibri;">And if this technique happens to offend you or scream in the face of all you hold dear in web standards, please forgive me, I’m a bit of a control freak. <img src='http://s0.wp.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </span></p>
<p>Source : www.CSSbeauty.com</p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/sundareshln.wordpress.com/6/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/sundareshln.wordpress.com/6/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/sundareshln.wordpress.com/6/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/sundareshln.wordpress.com/6/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/sundareshln.wordpress.com/6/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/sundareshln.wordpress.com/6/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/sundareshln.wordpress.com/6/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/sundareshln.wordpress.com/6/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/sundareshln.wordpress.com/6/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/sundareshln.wordpress.com/6/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/sundareshln.wordpress.com/6/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/sundareshln.wordpress.com/6/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/sundareshln.wordpress.com/6/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/sundareshln.wordpress.com/6/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/sundareshln.wordpress.com/6/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/sundareshln.wordpress.com/6/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=6&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://sundareshln.wordpress.com/2008/05/12/override-inline-styles-from-the-stylesheet/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/38335a4344211a41e01e48639f86f795?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">sundareshln</media:title>
		</media:content>
	</item>
		<item>
		<title>User Experience Of The Future</title>
		<link>http://sundareshln.wordpress.com/2008/05/06/user-experience-of-the-future/</link>
		<comments>http://sundareshln.wordpress.com/2008/05/06/user-experience-of-the-future/#comments</comments>
		<pubDate>Tue, 06 May 2008 05:31:07 +0000</pubDate>
		<dc:creator>sundareshln</dc:creator>
				<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://sundareshln.wordpress.com/?p=5</guid>
		<description><![CDATA[Over decades we’ve used to adapt our habits, behavior and mindset to technology. We’ve improved our productivity by using tools and devices designed especially for the tasks we have to deal with regularly. But we’ve also constrained our abilities to the features of the very tools and devices we’ve become dependant on. We’ve got used [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=5&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>Over decades we’ve used to adapt our habits, behavior and mindset to technology. We’ve improved our productivity by using tools and devices designed especially for the tasks we have to deal with regularly. But we’ve also constrained our abilities to the features of the very tools and devices we’ve become dependant on.</p>
<p>We’ve got used to a number of things. To traditional mouse-keyboard user interaction, to 2D windows-based user interface and to a rather unspectacular user’s workflow which enables one user interact with only one application at a time. For instance, while you’re browsing in your web browser you can’t scale your text and resize your window simultaneously — unless you are a keyboard-shortcut-master.</p>
<p>Good news: it can be different. Below we present some of the <strong>outstanding recent developments in the field of user experience design</strong>. Most techniques may seem very futuristic, but they are reality. And in fact, they are extremely impressive. Keep in mind: they can become ubiquitous over the next years.</p>
<h3>Future For Gamers: Cheoptics360™</h3>
<p>Absolutely incredible. <a href="http://vizoo.com/showreel_wmvs/EPK_Cheoptics360_XL.wmv">Cheoptics360</a> is a Vizoo’s product which can change our understanding of 3D for always. This is a documentation of the 5×5 meter Cheoptics360 in the Vizoo’s showroom. No special effects or compositing has been used editing this movie. This is the real thing. <a href="http://www.vizoo.com/">Official web-site.</a></p>
<p><a href="http://vizoo.com/"><img src="http://88.198.60.17/images/user-interface/cheo2.jpg" alt="Cheoptics" width="450" height="299" /></a></p>
<p><a href="http://vizoo.com/"><img src="http://88.198.60.17/images/user-interface/cheo1.jpg" alt="Cheoptics" width="450" height="299" /></a></p>
<h3>reactable</h3>
<p><a href="http://mtg.upf.edu/reactable/">reactable</a> is a <strong>collaborative electronic music instrument</strong> with a tabletop tangible multi-touch interface. Several simultaneous performers share complete control over the instrument by moving and rotating physical objects on a luminous round table surface.</p>
<p>By moving and relating these objects, representing components of a classic modular synthesizer, users can create complex and dynamic sonic topologies, with generators, filters and modulators, in a kind of tangible modular synthesizer or graspable flow-controlled programming language. <a href="http://mtg.upf.edu/reactable/?media">Demos</a>.</p>
<p><a href="http://mtg.upf.edu/reactable/"><img src="http://88.198.60.17/images/user-interface/reactable.jpg" alt="reactable" width="439" height="230" /></a></p>
<h3>Multi-Touch</h3>
<p><a href="http://cs.nyu.edu/~jhan/ftirtouch/">Multi-Touch Technology</a><br />
Multi-Touch-based devices <strong>accept input from multiple fingers and multiple users simultaneously</strong>, allowing for complex gestures, including grabbing, stretching, swiveling and sliding virtual objects across the table. While touch sensing is commonplace for single points of contact, multi-touch sensing enables a user to interact with a system with more than one finger at a time, as in chording and bi-manual operations. <a href="http://cs.nyu.edu/~jhan/ftirtouch/">Demos 1</a>, <a href="http://www.perceptivepixel.com/">Demos 2</a>.</p>
<p><a href="http://www.perceptivepixel.com/"><img src="http://88.198.60.17/images/user-interface/percpixel1.png" alt="Multi-Touch" width="450" height="252" /></a></p>
<p><a href="http://www.perceptivepixel.com/"><img src="http://88.198.60.17/images/user-interface/percpixel2.png" alt="Multi-Touch" width="450" height="254" /></a></p>
<p>Such sensing devices are inherently also able to accommodate multiple users simultaneously, which is especially useful for interactive walls and tabletops. Multi-Touch is already widely used. Apple’s iPhone has Multi-Touch scrolling and picture manipulation.</p>
<p><a href="http://cs.nyu.edu/~jhan/ftirtouch/"><img src="http://88.198.60.17/images/user-interface/multitouch.jpg" alt="Multi-Touch" width="411" height="214" /></a></p>
<p><a href="http://cs.nyu.edu/~jhan/ftirtouch/"><img src="http://88.198.60.17/images/user-interface/mtouch.jpg" alt="Multi-Touch" width="450" height="440" /></a></p>
<h3>Microsoft Surface</h3>
<p>Multi-Touch is also the core of <a href="http://www.microsoft.com/surface/">Microsoft Surface</a>, an interactive tabletop which allows a user, or multiple users, to manipulate digital content by the use of natural motions, hand gestures, or physical objects by putting them on the surface. <a href="http://www.popularmechanics.com/technology/industry/4217348.html">Microsoft Surface Reviewed</a>.</p>
<p><a href="http://www.popularmechanics.com/technology/industry/4217348.html"><img src="http://88.198.60.17/images/user-interface/msurface2.jpg" alt="Multi-Touch" width="450" height="343" /></a></p>
<p><a href="http://www.popularmechanics.com/technology/industry/4217348.html"><img src="http://88.198.60.17/images/user-interface/msurface.jpg" alt="Multi-Touch" width="450" height="342" /></a></p>
<h3>Photosynth</h3>
<p><a href="http://www.ted.com/index.php/talks/view/id/129">Photosynth</a><br />
Using photos of oft-snapped subjects (like Notre Dame) scraped from around the Web, Photosynth creates breathtaking multidimensional spaces with zoom and navigation features that outstrip all expectation. Its architect, Blaise Aguera y Arcas, shows it off in <a href="http://www.ted.com/index.php/talks/view/id/129">this standing-ovation demo</a>.</p>
<p><a href="http://labs.live.com/photosynth/"><img src="http://88.198.60.17/images/user-interface/blaise1.jpg" alt="Photosynth" width="450" height="254" /></a></p>
<p>The technology was recently acquired by Microsoft and is now a part of Microsoft Live Labs. <a href="http://labs.live.com/photosynth/">Microsoft Photosynth web-site</a>. Photosynth Technology is a new way to view photos on a computer. The software takes a large collection of photos of a place or an object, analyzes them for similarities, and then displays the photos in a reconstructed three-dimensional space, showing you how each one relates to the next.</p>
<p><a href="http://labs.live.com/photosynth/"><img src="http://88.198.60.17/images/user-interface/photosynth.jpg" alt="Photosynth" width="450" height="338" /></a></p>
<h3>BumpTop</h3>
<p><a href="http://bumptop.com/">Bumptop</a> is a fresh user interface that takes the usual desktop metaphor to a glorious, 3D extreme. In this physics-driven universe, important files finally get the weight they deserve via an oddly satisfying resizing feature, and the drudgery of file organization becomes a freewheeling playground full of crumpled documents and clipping-covered “walls.” <a href="http://www.ted.com/index.php/talks/view/id/131">TED-presentation of Bumptop</a>.</p>
<p><a href="http://bumptop.com/"><img src="http://88.198.60.17/images/user-interface/bumptop.jpg" alt="Bumptop" width="450" height="300" /></a></p>
<h3>Further References</h3>
<ul>
<li><a href="http://www.youtube.com/watch?v=RZcJOZC38iQ">3D Operating System</a><br />
Next Generation Operating System from Sun Micro Systems</li>
<li><a href="http://www.youtube.com/watch?v=T8d9Z92cO_c">XTR3D</a> is real-time software that analyzes 3D human motions using only one simple web cam, without any additional accessories. It will allow users to play games and interact in virtual worlds using natural human motions instead of keyboards, mouses and joysticks. Released Sep 27, 2007.</li>
</ul>
<p>Source : <a href="http://www.smashingmagazine.com">http://www.smashingmagazine.com</a><a href="http://www.smashing"></a></p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/sundareshln.wordpress.com/5/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/sundareshln.wordpress.com/5/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/sundareshln.wordpress.com/5/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/sundareshln.wordpress.com/5/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/sundareshln.wordpress.com/5/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/sundareshln.wordpress.com/5/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/sundareshln.wordpress.com/5/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/sundareshln.wordpress.com/5/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/sundareshln.wordpress.com/5/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/sundareshln.wordpress.com/5/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/sundareshln.wordpress.com/5/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/sundareshln.wordpress.com/5/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/sundareshln.wordpress.com/5/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/sundareshln.wordpress.com/5/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/sundareshln.wordpress.com/5/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/sundareshln.wordpress.com/5/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=5&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://sundareshln.wordpress.com/2008/05/06/user-experience-of-the-future/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://vizoo.com/showreel_wmvs/EPK_Cheoptics360_XL.wmv" length="22279752" type="video/x-ms-wmv" />
	
		<media:content url="http://1.gravatar.com/avatar/38335a4344211a41e01e48639f86f795?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">sundareshln</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/cheo2.jpg" medium="image">
			<media:title type="html">Cheoptics</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/cheo1.jpg" medium="image">
			<media:title type="html">Cheoptics</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/reactable.jpg" medium="image">
			<media:title type="html">reactable</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/percpixel1.png" medium="image">
			<media:title type="html">Multi-Touch</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/percpixel2.png" medium="image">
			<media:title type="html">Multi-Touch</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/multitouch.jpg" medium="image">
			<media:title type="html">Multi-Touch</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/mtouch.jpg" medium="image">
			<media:title type="html">Multi-Touch</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/msurface2.jpg" medium="image">
			<media:title type="html">Multi-Touch</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/msurface.jpg" medium="image">
			<media:title type="html">Multi-Touch</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/blaise1.jpg" medium="image">
			<media:title type="html">Photosynth</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/photosynth.jpg" medium="image">
			<media:title type="html">Photosynth</media:title>
		</media:content>

		<media:content url="http://88.198.60.17/images/user-interface/bumptop.jpg" medium="image">
			<media:title type="html">Bumptop</media:title>
		</media:content>
	</item>
		<item>
		<title>Interaction Design</title>
		<link>http://sundareshln.wordpress.com/2008/04/30/interaction-design/</link>
		<comments>http://sundareshln.wordpress.com/2008/04/30/interaction-design/#comments</comments>
		<pubDate>Wed, 30 Apr 2008 10:53:30 +0000</pubDate>
		<dc:creator>sundareshln</dc:creator>
				<category><![CDATA[Interaction Design]]></category>

		<guid isPermaLink="false">http://sundareshln.wordpress.com/?p=3</guid>
		<description><![CDATA[Interaction design is design for human use. It involves answering three questions: How do you do? What sort of ways do you affect the world: poke it, manipulate it, sit on it? How do you feel? What do you sense of the world and what are the sensory qualities that shape media? How do you [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=3&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><a href="http://bp3.blogger.com/_VrFvXCZUZTo/SBhGhTrEf6I/AAAAAAAAAAM/YblY9ShkHcI/s1600-h/1.jpg"><img style="display:block;cursor:hand;text-align:center;margin:0 auto 10px;" src="http://bp3.blogger.com/_VrFvXCZUZTo/SBhGhTrEf6I/AAAAAAAAAAM/YblY9ShkHcI/s320/1.jpg" border="0" alt="" /></a><br />
Interaction design is design for human use. It involves answering three questions:<br />
How do you do? What sort of ways do you affect the world: poke it, manipulate it, sit on it?<br />
How do you feel? What do you sense of the world and what are the sensory qualities that shape media?<br />
How do you know? What are the ways that you learn and plan (or perhapse, how we want you to think)?<br />
<a href="http://bp0.blogger.com/_VrFvXCZUZTo/SBhGrjrEf7I/AAAAAAAAAAU/97aDuMv2eIo/s1600-h/2.jpg"><img style="display:block;cursor:hand;text-align:center;margin:0 auto 10px;" src="http://bp0.blogger.com/_VrFvXCZUZTo/SBhGrjrEf7I/AAAAAAAAAAU/97aDuMv2eIo/s320/2.jpg" border="0" alt="" /></a><br />
One of the important choices for &#8220;How do you do&#8221;; is between HANDLES and BUTTONS.<br />
Handles are better for continuous control (e.g. trombone)<br />
Buttons are better for discrete control (e.g. piano keyboard)<br />
Handles leave you in control (e.g. opening a car door).<br />
Buttons are more likely to trigger something automatic (e.g. opening an elevator door).<br />
One choice for &#8220;How do you feel?&#8221; is McLuhan&#8217;s &#8220;hot&#8221; vs &#8220;cool&#8221;.<br />
Hot media like print are more authoritative and exact.<br />
Cool media like cartoons and television are fuzzy and incomplete they invite more participation.<br />
One choice for &#8220;How do you know?&#8221;, is between MAPS and PATHS.<br />
Paths are good for beginners just tell me step by step what to do.<br />
Maps are good for understanding alternatives they take longer to learn but are more robust.<br />
Paths are good for expert skill; they can be very efficient.<br />
<a href="http://bp3.blogger.com/_VrFvXCZUZTo/SBhG1TrEf8I/AAAAAAAAAAc/JdigAYl_6Pk/s1600-h/3.jpg"><img style="display:block;cursor:hand;text-align:center;margin:0 auto 10px;" src="http://bp3.blogger.com/_VrFvXCZUZTo/SBhG1TrEf8I/AAAAAAAAAAc/JdigAYl_6Pk/s320/3.jpg" border="0" alt="" /></a><br />
Here are two vending machines. One presents a PATH-like interface. One is more like a MAP.<br />
Which do you prefer?<br />
Which is better for the vendor?<br />
Which is faster?<br />
What are the failure and recovery possibilities?<br />
<a href="http://bp1.blogger.com/_VrFvXCZUZTo/SBhG_zrEf9I/AAAAAAAAAAk/lPOoCxuThvw/s1600-h/4.jpg"><img style="display:block;cursor:hand;text-align:center;margin:0 auto 10px;" src="http://bp1.blogger.com/_VrFvXCZUZTo/SBhG_zrEf9I/AAAAAAAAAAk/lPOoCxuThvw/s320/4.jpg" border="0" alt="" /></a><br />
What is a computer? Various metaphors have organized entire careers.<br />
Such powerful metaphors are called &#8220;paradigms&#8221;. They motivate the central questions asked. They help us understand the STYLE of interaction. Understanding competing paradigms helps us understand what various people consider a &#8220;good&#8221; interaction design.<br />
<a href="http://bp1.blogger.com/_VrFvXCZUZTo/SBhHJzrEf-I/AAAAAAAAAAs/sFdCN3oVP4s/s1600-h/5.jpg"><img style="display:block;cursor:hand;text-align:center;margin:0 auto 10px;" src="http://bp1.blogger.com/_VrFvXCZUZTo/SBhHJzrEf-I/AAAAAAAAAAs/sFdCN3oVP4s/s320/5.jpg" border="0" alt="" /></a><br />
At least eight distinct phases can be identified in the interaction design process. They range from the concrete instance (path-like) to the general overview (map-like) and from invention to presentation.</p>
<p>Source:<a class="alignleft" title="http://hci.sapp.org/" href="http://hci.sapp.org/" target="_blank">http://hci.sapp.org/</a></p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/sundareshln.wordpress.com/3/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/sundareshln.wordpress.com/3/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/sundareshln.wordpress.com/3/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/sundareshln.wordpress.com/3/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/sundareshln.wordpress.com/3/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/sundareshln.wordpress.com/3/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/sundareshln.wordpress.com/3/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/sundareshln.wordpress.com/3/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/sundareshln.wordpress.com/3/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/sundareshln.wordpress.com/3/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/sundareshln.wordpress.com/3/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/sundareshln.wordpress.com/3/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/sundareshln.wordpress.com/3/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/sundareshln.wordpress.com/3/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/sundareshln.wordpress.com/3/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/sundareshln.wordpress.com/3/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=sundareshln.wordpress.com&amp;blog=3613857&amp;post=3&amp;subd=sundareshln&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://sundareshln.wordpress.com/2008/04/30/interaction-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/38335a4344211a41e01e48639f86f795?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">sundareshln</media:title>
		</media:content>

		<media:content url="http://bp3.blogger.com/_VrFvXCZUZTo/SBhGhTrEf6I/AAAAAAAAAAM/YblY9ShkHcI/s320/1.jpg" medium="image" />

		<media:content url="http://bp0.blogger.com/_VrFvXCZUZTo/SBhGrjrEf7I/AAAAAAAAAAU/97aDuMv2eIo/s320/2.jpg" medium="image" />

		<media:content url="http://bp3.blogger.com/_VrFvXCZUZTo/SBhG1TrEf8I/AAAAAAAAAAc/JdigAYl_6Pk/s320/3.jpg" medium="image" />

		<media:content url="http://bp1.blogger.com/_VrFvXCZUZTo/SBhG_zrEf9I/AAAAAAAAAAk/lPOoCxuThvw/s320/4.jpg" medium="image" />

		<media:content url="http://bp1.blogger.com/_VrFvXCZUZTo/SBhHJzrEf-I/AAAAAAAAAAs/sFdCN3oVP4s/s320/5.jpg" medium="image" />
	</item>
	</channel>
</rss>
