<?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>Smart Alice's Web Design Blog</title>
	<atom:link href="http://smartalicewebdesign.com/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>http://smartalicewebdesign.com/wordpress</link>
	<description>What makes a great web site? Join the conversation about what works or doesn't work when you're designing a web site.</description>
	<lastBuildDate>Thu, 10 Jun 2010 19:56:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Sinners, Repent &#8211; The 7 Deadly Sins of Web Design!</title>
		<link>http://smartalicewebdesign.com/wordpress/user-interface-design/sinners-repent-the-7-deadly-sins-of-web-design/</link>
		<comments>http://smartalicewebdesign.com/wordpress/user-interface-design/sinners-repent-the-7-deadly-sins-of-web-design/#comments</comments>
		<pubDate>Thu, 10 Jun 2010 19:56:10 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[User Interface Design]]></category>
		<category><![CDATA[bad web design]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[user interaction]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=447</guid>
		<description><![CDATA[I&#8217;ve always enjoyed the 7 deadly sins as thematic material for art and literature.  So I got a big kick out of the following use of the 7 sins to structure a narrative on bad web design.   Its origin is a webinair by Seth Rosenblatt at the American Marketing Association.  It came to me via [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/06/bosch.jpg" alt="bosch" title="bosch" width="499" height="565" class="aligncenter size-full wp-image-458" /><br />
I&#8217;ve always enjoyed the 7 deadly sins as thematic material for art and literature.  So I got a big kick out of the following use of the 7 sins to structure a narrative on bad web design.   Its origin is a webinair by Seth Rosenblatt at the American Marketing Association.  It came to me via a newsletter by Lynn Ericson from<a href="http://ericsonmitchell.com/" target="_blank"> Ericson Mitchell</a>.  I hope you enjoy it as much as I did.</p>
<hr />
<span style="color: #000000;"><span>The </span></span><span style="color: #000000; font-weight: bold;"><span>Seven Deadly Sins</span></span><span style="color: #000000;"><span> is, of course, a classification of objectionable  vices that has been around since early Christian times to instruct and educate  followers. It may seem like a stretch to apply the sins&#8211; pride, greed, envy,  lust, gluttony, sloth,wrath &#8212; to your website. Eternal damnation is not much of  a risk if your site is guilty of any of these &#8212; </span></span><span><span style="color: #000000;">but losing visitors is.</span></span></p>
<p><span style="color: #000000;"><span style="color: #ff0000; font-weight: bold;">1. PRIDE (VANITY)</span> &#8212; excessive love  of self &#8212; is pretty easy to recognize if the site is obviously ALL ABOUT YOU.  Your company is wonderful, you are wonderful and your product or service is, of  course, wonderful &#8212; all of which may be true &#8212; but if this is your focus, most  likely you&#8217;re not as concerned as you should be about gearing your site to your  clients&#8217; or customers&#8217; needs.  &#8221;What are the benefits to the customer?&#8221; has been  the marketers&#8217; mantra for as long as I can remember. Not only do you need to  connect with your visitors but you must anticipate how they are going to  navigate your site. </span></p>
<p><span style="color: #000000;">At Ericson  Mitchell, we stress that creating a personality for your company is the essence  of your brand. But the personality is not YOU so lose the CEO or president&#8217;s  photo on the first page of your site &#8212; unless he or she is Oprah, Cesar the Dog  Whisperer or someone else well enough known to be an integral part of the  company&#8217;s brand.</span></p>
<p><span style="color: #000000;"><span style="color: #ff0000; font-weight: bold;">2. GREED</span> &#8212; an excessive  desire for more than one needs &#8212; is all about asking for too much from your  visitors. Let&#8217;s say the consumer is ready to buy your book, for example, and he  is about to hit the red BUY NOW button and he notices a few more  options:</span><br />
<span style="font-style: italic; color: #000000;">CLICK  HERE to download our latest white paper, </span><br />
<span style="font-style: italic; color: #000000;">CLICK HERE to sign up for our  newsletter, </span><br />
<span style="font-style: italic; color: #000000;">CLICK  HERE to read our privacy policy.</span></p>
<p><span style="color: #000000;">You have provided enough DISTRACTIONS to get him to  another page and he&#8217;s off on another tangent. The more alternatives you provide  to take action, the less likely you are to get the sale. The same is true for  asking for too much information on forms &#8212; streamlining them makes it much more  likely that visitors will actually finish providing the info you need before  they&#8217;re interrupted by something &#8212; and gone. </span></p>
<div style="color: #000000;"><span> </span></div>
<p><span style="color: #000000;"><span style="color: #ff0000; font-weight: bold;"><span>3. GLUTTONY </span></span><span>&#8211; wanting  more of everything, over-indulgence &#8212; is frequently manifested in so many  sites, the ones we all run across and </span></span><span><span style="color: #000000;">exit as quickly as possible. You only have a few  seconds to engage a visitor and if your site has TOO MUCH of everything&#8211; too  many images, too much content and too many typefaces &#8212; the result will feel  chaotic to the viewer, who will not know where to start reading and probably  move on. In the world of web design, we call these &#8220;clown pants&#8221; sites. The  &#8220;white space&#8221; that designers love so much is not to make sites look pretty but  because it helps guide the viewers through your site the way you want them to  experience it. Often, less really is more.</span></span></p>
<p><span style="color: #000000;"><span style="color: #ff0000; font-weight: bold;">4. ENVY</span> &#8212; desire for what  another has &#8212; can result in sending out a generic message on your website.  Don&#8217;t copy what your competitors are doing. Be clear how you are  differentiated from them and emphasize that. Their websites may not be all that  effective and when it comes to usability, visitors are more likely to compare  your site with the experience of sites they visit frequently and are comfortable  with.</span></p>
<div style="color: #000000;"><span style="color: #ff0000; font-weight: bold;"><span>5. LUST </span></span><span> As much as you  would love your site to look as cool as your rock musician brother&#8217;s site,  with Flash animation, video and music, the customers in your lawn care business  probably wouldn&#8217;t be impressed. There should be a purpose behind every element  of your site and flash over substance is always a mistake. Not only does it NOT  attract the customers you want, it actually alienates them and can hinder your  efforts at Search Engine Optimization.<br />
</span></div>
<p><span><span style="color: #000000;"><span style="color: #ff0000; font-weight: bold;">6. SLOTH</span> Ask yourself  some questions. When was the last time you updated the content in your site?  Does your site look stuck in the 1990&#8242;s? Are you taking advantage of <span style="font-style: italic;">Google Analytics</span> or even just the statistics  provided by your hosting company? The really great thing about the web is that  the metrics are so easy to access and you can find out where your visitors come  from, what pages they visit, how long they stay, when they visit, etc. Much of  this information is FREE. And Content Management Systems are now so much more  sophisticated and easy to use that excuses are harder to find for not staying  current. </span></span></p>
<p><span style="color: #000000;">And finally <span style="color: #ff0000; font-weight: bold;">7. WRATH</span>.  Probably  expressing anger on your site is not an issue, unless you want to attract other  angry people. Provoking anger is </span><span style="color: #000000;">a  different story. Visitors who become frustrated navigating your site or annoyed  by not finding what they need will give up and go elsewhere. A recent survey by  <span style="font-style: italic;">Hostways</span> came up with seven biggest pet  peeves:<br />
</span></p>
<ul><span></p>
<li>
<div style="color: #000000;">Pop up ads</div>
</li>
<li>
<div style="color: #000000;">Being required to install software to view the  site</div>
</li>
<li>
<div style="color: #000000;">Dead links</div>
</li>
<li>
<div style="color: #000000;">Confusing navigation</div>
</li>
<li>
<div style="color: #000000;">Required registration to access content</div>
</li>
<li>
<div style="color: #000000;">Slow loading pages</div>
</li>
<li>
<div style="color: #000000;">Ineffective site search tools</div>
</li>
<p></span></ul>
<p><span style="color: #000000;"><span>70% of respondents said they  would be unlikely to purchase from a site that annoyed them, that they would  probably never go back and &#8212; that they never want to hear from that company  again. An irritated visitor is usually an ex-visitor.</span></span><span><br />
</span><br />
<img src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/06/rski.jpg" alt="rossignol ski line" title="rossignol ski line" width="558" height="290" class="aligncenter size-full wp-image-460" /></p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/user-interface-design/sinners-repent-the-7-deadly-sins-of-web-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Adding a Video to Your Web Site</title>
		<link>http://smartalicewebdesign.com/wordpress/content-development/adding-a-video-to-your-web-site/</link>
		<comments>http://smartalicewebdesign.com/wordpress/content-development/adding-a-video-to-your-web-site/#comments</comments>
		<pubDate>Tue, 25 May 2010 17:09:26 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Content Development]]></category>
		<category><![CDATA[Video]]></category>
		<category><![CDATA[web site video]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=420</guid>
		<description><![CDATA[Videos are a great addition to your web site, especially if you want to explain how a product works, create a case study, or do something wild and creative. Hiring professionals is expensive but it&#8217;s entirely possible to make a powerful video yourself.  I like the videos made by Lee Lefever for Common Craft who [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.youtube.com/watch?v=bVnfyradCPY&amp;feature=related" target="_blank"><img class="aligncenter" title="Zombies in Plain English" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/05/zombies.jpg" alt="Zombies in Plain English" width="404" height="262" /></a>Videos are a great addition to your web site, especially if you want to explain how a product works, create a case study, or do something wild and creative. Hiring professionals is expensive but it&#8217;s entirely possible to make a powerful video yourself.  I like the videos made by Lee Lefever for <a title="Common Craft" href="http://www.commoncraft.com/" target="_blank">Common Craft </a>who created the &#8220;&#8230;in Plain English&#8221;series.  They&#8217;re very simple.  The props are a whiteboard and Post Its.  You can see their videos on their web site or on YouTube.</p>
<p>Are you inspired?<a title="Pixability" href="http://www.pixability.com/" target="_blank"> Pixability</a>, a company that helps small businesses make videos, has the following tips for making your own videos:</p>
<ol>
<li>Get a simple-to-use camera. The Flip camera and Kodak Zi8 are recommended. Make sure the camera allows  for easy downloads.</li>
<li> It’s the content, baby! What are your best  customers passionate about? Tell stories that give your audience the  information they are searching for.</li>
<li> Shorter is better. Viewers  have short attention spans, so don’t squeeze too many messages into one  video. Less than two minutes is optimal for the Web.</li>
<li>Hold still.  Grip the video camera with both hands and keep a stable shot for at  least 10 seconds.</li>
<li> Lights, camera, action. Turn on all the lights  when shooting, and never shoot someone whose back is to the sun. Have  your subjects speak loudly, and avoid background noise.</li>
<li> Deliver  the right message. End with a call to action.</li>
</ol>
<p>You can read more about Pixability and web videos in the article<a title="Boston Globe" href="http://www.boston.com/business/technology/articles/2010/05/25/claim_to_frame_helping_businesses_polish_images/" target="_blank"> Claim to frame: Helping businesses polish images</a> published in the Boston Globe on 5/25/10.</p>
<p>Analysis by <a href="http://smartalicewebdesign.com"><strong>Smart Alice Web Design</strong></a>,  smart web design for businesses who want a unique and effective  presence on the internet.</p>
<p>Copyright 2010,  Alice Gebura,  All Rights Reserved.</p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/content-development/adding-a-video-to-your-web-site/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Creating a Mood</title>
		<link>http://smartalicewebdesign.com/wordpress/visual-design/creating-a-mood/</link>
		<comments>http://smartalicewebdesign.com/wordpress/visual-design/creating-a-mood/#comments</comments>
		<pubDate>Wed, 21 Apr 2010 16:12:58 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[visual interpretation]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=410</guid>
		<description><![CDATA[Someone was curious about the &#8220;mood&#8221; image on the home page of my website.  My daughter made a puppet in 8th grade art class.  First I photographed the puppet as a standard portrait: Then I wrapped it in black fabric and startled it with a spotlight pointing up towards the face! I took this image [...]]]></description>
			<content:encoded><![CDATA[<p>Someone was curious about the &#8220;mood&#8221; image on the home page of my website.  My daughter made a puppet in 8th grade art class.  First I photographed the puppet as a standard portrait:</p>
<p><img class="aligncenter size-large wp-image-411" title="puppet against white fabric" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/04/puppetwhite-791x1024.jpg" alt="puppet against white fabric" width="600" height="776" /></p>
<p>Then I wrapped it in black fabric and startled it with a spotlight pointing up towards the face!</p>
<p><img class="aligncenter size-large wp-image-412" title="puppet wrapped in black fabric" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/04/puppetblack2-680x1024.jpg" alt="puppet wrapped in black fabric" width="600" height="903" /></p>
<p>I took this image and used Photoshop to paint around the face and hands with black.  Then I used the perspective tool (Edit &#8211; Transform &#8211; Perspective) to distort the proportions.  Finally, I used Curves to saturate the colors for a more lurid effect.</p>
<p><img class="aligncenter size-full wp-image-413" title="transformed in photoshop" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/04/puppet72rgb.jpg" alt="transformed in photoshop" width="370" height="557" /></p>
<p>Photos by Alice Gebura    Analysis by <a href="http://smartalicewebdesign.com"><strong>Smart Alice Web Design</strong></a>,  smart web design for businesses who want a unique and effective  presence on the internet.</p>
<p>Copyright 2010,  Alice Gebura,  All Rights Reserved.</p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/visual-design/creating-a-mood/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Negative Space</title>
		<link>http://smartalicewebdesign.com/wordpress/visual-design/negative-space/</link>
		<comments>http://smartalicewebdesign.com/wordpress/visual-design/negative-space/#comments</comments>
		<pubDate>Tue, 13 Apr 2010 22:33:09 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[Ikebana]]></category>
		<category><![CDATA[negative space]]></category>
		<category><![CDATA[simplicity]]></category>
		<category><![CDATA[visual interpretation]]></category>
		<category><![CDATA[visual motion]]></category>
		<category><![CDATA[web site design]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=397</guid>
		<description><![CDATA[I attended a workshop in Ikebana,  the Japanese art of flower arranging. The Ikebana concept that impressed me the most was that of visual motion.  Ikebana strives to keep the eye engaged by eliminating any element that would stop the continuous scanning motion of the eye.   Some examples of such eye stopping elements are: Straight [...]]]></description>
			<content:encoded><![CDATA[<p>I attended a workshop in Ikebana,  the Japanese art of flower arranging. The Ikebana concept that impressed me the most was that of visual motion.  Ikebana strives to keep the eye engaged by eliminating any element that would stop the continuous scanning motion of the eye.   Some examples of such eye stopping elements are:</p>
<ul>
<li> Straight lines</li>
<li>90 degree angles</li>
<li>Absence of  <strong>negative space (space between objects)<br />
</strong></li>
</ul>
<p>The photo to the left shows an Ikebana arrangement.</p>
<div id="attachment_398" class="wp-caption alignright" style="width: 310px"><img class="size-full wp-image-398" title="ikebana" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/04/ikebana.jpg" alt="Example of Ikebana" width="300" height="343" /><p class="wp-caption-text">Example of Ikebana</p></div>
<p>Notice the following:</p>
<ul>
<li>Simplicity, only 3 elements: white calla lilies, pink azaleas and black tray</li>
<li>Curved lines, no straight lines</li>
<li>Only 5 upright flowers grouped as 3 + 2, creating negative space between the vertical elements, the stems</li>
<li>Negative space between the horizontal elements: calla lilies at the top,  azaleas and tray at the bottom</li>
</ul>
<p>Despite the sparse, simple aesthetic, its visual interest  pulls you in and keeps you there.  Isn’t that what we want for our own web sites?</p>
<p>I gave some thought to how I could  apply this to web design.  I believe when you drill down and understand your goals and core values and how to realize them, you arrive at a truth that can be expressed simply and effectively.</p>
<p>If you don’t really understand who you are and what you’re doing, what better way to cover it up than to keep piling on more and more until you get a web site that looks like this:</p>
<p><a class="aligncenter" href="http://www.georgehutchins.com/" target="_blank"><img class="aligncenter size-full wp-image-401" title="hutchins for congress" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/04/hutchins.jpg" alt="hutchins for congress" width="300" height="200" /></a></p>
<p>Analysis by <a href="smartalicewebdesign.com">Smart Alice Web Design</a>, smart web design for businesses who want a unique and effective presence on the internet.</p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/visual-design/negative-space/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Depth</title>
		<link>http://smartalicewebdesign.com/wordpress/visual-design/depth/</link>
		<comments>http://smartalicewebdesign.com/wordpress/visual-design/depth/#comments</comments>
		<pubDate>Fri, 26 Feb 2010 13:15:20 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Content Development]]></category>
		<category><![CDATA[User Interface Design]]></category>
		<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[depth of information]]></category>
		<category><![CDATA[user interaction]]></category>
		<category><![CDATA[using fonts]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=353</guid>
		<description><![CDATA[For me this web site is the epitome of why we bother to build web sites.]]></description>
			<content:encoded><![CDATA[<div id="attachment_372" class="wp-caption alignleft" style="width: 160px"><a href="http://louislortie.com" target="_blank"><img class="size-thumbnail wp-image-372 "  title="Click to go to the web site" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/02/lortie22-150x150.png" alt="Home Page, Web Site of Louis Lortie" width="150" height="150" /></a><p class="wp-caption-text">Home Page, Web Site of Louis Lortie</p></div>
<p>Monday, March 1 marks the 200<sup>th</sup> anniversary of Frederick Chopin’s birthday.  In honor of one of my favorite composers let’s talk about the web site of pianist <a href="http://www.louislortie.com/" target="_blank">Louis Lortie</a>.  For me this web site is the epitome of why we bother to build web sites.  Louis Lortie is a  concert pianist and recording artist.  At his site there is a great depth of information about him, his career and discography, and, most interesting, it showcases his thoughts about music interpretation and its challenges.</p>
<p>Here’s the treasure you’ll find on just one page, Chopin:</p>
<ul style="margin-left:180px;">
<li>An excerpt from the score of a Chopin Etude</li>
<li>A series of videos</li>
<li>A photo of Chopin</li>
</ul>
<p>The series of short videos showcase  Lortie playing two of the Chopin Etudes (a glorious aural experience) and Lortie, at the piano, talking about his approach to playing the etudes while playing excerpts to illustrate his thoughts.  As each video plays, its title  changes from black to lavender so you can keep track of where you are in the series.  Or, you can click on the one you want to hear.  Great user interface design!  Notice that underneath the video the timer is presented as a musical staff!  Clever design!</p>
<div id="attachment_370" class="wp-caption alignleft" style="width: 310px"><a href="http://louislortie.com" target="_blank"><img class="size-medium wp-image-370 " title="Click to go to the web site" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/02/lortie1-300x277.png" alt="Chopin Page, Web Site of Louis Lortie" width="300" height="277" /></a><p class="wp-caption-text">Chopin Page, Web Site of Louis Lortie</p></div>
<p>My only criticism is that the text on the home page is hard to read – a result of using a justified right margin and the italic font with very little line spacing.  The  opacity factor on the font doesn&#8217;t help either.</p>
<p>Lortie has created a passionate web site with great depth of information that gives us a window into his soul and the beauty of the music he plays.</p>
<p>Analysis by <a href="smartalicewebdesign.com">Smart Alice Web Design</a>, smart web design for businesses who want a unique and effective presence on the internet.</p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/visual-design/depth/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Persuasive Power of Repetition, Clarity, &amp; Simplicity</title>
		<link>http://smartalicewebdesign.com/wordpress/navigation/the-persuasive-power-of-repetition-clarity-simplicity/</link>
		<comments>http://smartalicewebdesign.com/wordpress/navigation/the-persuasive-power-of-repetition-clarity-simplicity/#comments</comments>
		<pubDate>Wed, 03 Feb 2010 02:10:07 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Layout]]></category>
		<category><![CDATA[Navigation]]></category>
		<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[bad web design]]></category>
		<category><![CDATA[clarity]]></category>
		<category><![CDATA[disfluency]]></category>
		<category><![CDATA[fluency]]></category>
		<category><![CDATA[font selection]]></category>
		<category><![CDATA[good web design]]></category>
		<category><![CDATA[inaccessiblity]]></category>
		<category><![CDATA[inconsistency]]></category>
		<category><![CDATA[repetition]]></category>
		<category><![CDATA[sensory overload]]></category>
		<category><![CDATA[simplicity]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[web navigation]]></category>
		<category><![CDATA[web site analysis]]></category>
		<category><![CDATA[web site content]]></category>
		<category><![CDATA[web site design]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=325</guid>
		<description><![CDATA[Another argument emerges for simple web design (see my previous post  Creating Your Web-Scape)  in Drake Bennett’s article on cognitive fluency, Easy=True. Cognitive fluency is  the psychological precept that “people prefer things that are easy to think about to those that are hard…In any situation where we weigh information, fluency is implicated in our decisions [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-334" title="easy" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/02/easy.jpg" border="1" alt="easy" width="300" height="216" />Another argument emerges for simple web design (see my previous post  <a href="http://smartalicewebdesign.com/wordpress/?p=241">Creating Your Web-Scape</a>)  in Drake Bennett’s article on cognitive fluency, <a href="http://www.boston.com/bostonglobe/ideas/articles/2010/01/31/easy__true/"> Easy=True</a>.  <strong>Cognitive fluency</strong> is  the psychological precept that “people prefer things that are easy to think about to those that are hard…In any situation where we weigh information, fluency is implicated in our decisions about everything.”</p>
<p>In a nutshell, when information is easier to mentally process, people feel attraction and belief.  The opposite,  disfluency &#8211; making things difficult to grasp,  creates a cognitive roadblock that makes people wary and uncomfortable.</p>
<p>While this might seem intuitively obvious, evidence abounds that plenty of businesses (and web designers) don’t get it.</p>
<p>Bennett’s article is a terrific resource for more information on fluency and disfluency and the supporting research.</p>
<p>For the purpose of this blog let’s take a look at the practical implications of fluency and  disfluency in terms of web design.  Keep in mind this is all based on research, not my own preferences.</p>
<h1 style="font-size:18px;">Disfluency:the art of making things difficult -</h1>
<h1 style="font-size:18px;">Web Design that Loses Business</h1>
<p>Here are some characteristics of a disfluent web site that will leave web site visitors with a negative impression.</p>
<p><strong>Inaccessibility</strong></p>
<ul>
<li>Unfamiliar words (for example, technical jargon and acronyms)</li>
<li>Names and words that are difficult to pronounce</li>
<li>Complex syntax</li>
<li>Illegible text (see my previous post <a href="http://smartalicewebdesign.com/wordpress/?p=49xxx">The Dog and the Lotus</a>)</li>
<li>Missing information or convoluted instructions</li>
<li>Functions that don’t quite work</li>
</ul>
<p><strong>Sensory Overload</strong></p>
<ul>
<li>Overcrowding the page</li>
<li>Visual distractions</li>
<li>Multiple columns of disparate text</li>
<li>Little or no white space</li>
<li>Flickering animation</li>
</ul>
<p><strong>Inconsistency</strong></p>
<ul>
<li>Confusing navigation</li>
<li> Poor organization</li>
</ul>
<h1 style="font-size:18px;">Fluency:the art of making things easy to understand -<br />
Web Design that Encourages Business</h1>
<p>Here are some characteristics of a fluent web site that subliminally suggest to visitors that your business is reputable and trustworthy.</p>
<p><strong>Repetition</strong></p>
<ul>
<li>Consistent navigation and page layout across the web site</li>
<li>Artful repetition of key ideas(note: repetition is good, redundancy is bad – know the difference)</li>
</ul>
<p><strong>Clarity</strong></p>
<ul>
<li>Legible fonts and color coordination</li>
<li>Plenty of white space</li>
<li>Language and syntax that everyone can understand</li>
</ul>
<p><strong>Simplicity</strong></p>
<ul>
<li>Message boiled down to its essence</li>
<li>Graphic design and content that are easy to assimilate (accessible) both visually and conceptually</li>
</ul>
<h1 style="font-size:18px;">Web Site Analysis: <a href="http://philipjohnsonglasshouse.org/">The Glass House</a></h1>
<p><a href="http://philipjohnsonglasshouse.org/"><img class="aligncenter size-full wp-image-338" title="glass house web site" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2010/02/glass.jpg" alt="glass house web site" width="500" height="251" /></a>Let’s take a look at the web site for The Glass House and see how well it does fluency wise.</p>
<p><strong>Repetition:</strong> The grey box is repeated throughout as the background to the title (I like the opacity that reminds us of the see through quality of glass), the background in the drop down menus, and the background for other important pieces of information.</p>
<p><strong>Clarity:</strong> The site contains a lot of information,  notice how it’s been logically organized and categorized.</p>
<p><strong>Simplicity:</strong> One column layout, plenty of white space.</p>
<p><strong>Verdict:</strong> Fluency.  I’m convinced this is a reputable organization dedicated to professionalism on all levels.</p>
<p>Analysis by <a href="smartalicewebdesign.com">Smart Alice Web Design</a>, smart web design for businesses who want a unique and effective presence on the internet.</p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/navigation/the-persuasive-power-of-repetition-clarity-simplicity/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Two Cool Web Sites</title>
		<link>http://smartalicewebdesign.com/wordpress/navigation/two-cool-web-sites/</link>
		<comments>http://smartalicewebdesign.com/wordpress/navigation/two-cool-web-sites/#comments</comments>
		<pubDate>Tue, 17 Nov 2009 01:53:46 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Layout]]></category>
		<category><![CDATA[Navigation]]></category>
		<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[innovative web design]]></category>
		<category><![CDATA[motion graphics]]></category>
		<category><![CDATA[user interaction]]></category>
		<category><![CDATA[web navigation]]></category>
		<category><![CDATA[web site analysis]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=297</guid>
		<description><![CDATA[Two web sites caught my eye recently. Blue Box Layout The Guthrie Theater web site has a great layout. Blue boxes in all different sizes contain information, photos, slides &#8211; I really like the blue and gray stripes behind the horizontal navigation links (someone tell the webmaster to fix the padding on the second line [...]]]></description>
			<content:encoded><![CDATA[<p>Two web sites caught my eye recently.</p>
<h2>Blue Box Layout</h2>
<p><a href="http://www.guthrietheater.org/">The Guthrie Theater</a> web site has a great layout. Blue boxes in all different sizes contain information, photos, slides &#8211; I really like the blue and gray stripes behind the horizontal navigation links (someone tell the webmaster to fix the padding on the second line of links so they&#8217;re centered) and the way they change colors as they stretch beyond the content area.</p>
<p><a href="http://www.guthrietheater.org/"><img class="aligncenter size-full wp-image-298" title="Home Page, Guthrie Theater" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/11/guthrie3.jpg" alt="Home Page, Guthrie Theater" width="400" height="332" /></a></p>
<h2>Innovative Navigation</h2>
<p>The web site for artists <a href="http://louviereandvanessa.com/grotesk/index.html">Louviere + Vanessa: New Orleans</a> is definitely outside the box. I love their images.  To navigate the site you use your mouse to draw an arrow in the direction you want to go.  You&#8217;ve got to try it and see what you think of it.  It&#8217;s really strange, but I love the user interaction.  If I were truly trying to find information, this would be a disastrous experience.  But the site is an art gallery and it&#8217;s so much fun to wander through the gallery with this unusual navigation gizmo.  Gotta find out how they do it!!</p>
<p><a href="http://louviereandvanessa.com/grotesk/index.html"><img class="aligncenter size-full wp-image-300" title="Louviere + Vanessa, web site" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/11/lvno.jpg" alt="Louviere + Vanessa, web site" width="400" height="248" /></a></p>
<p>Analysis by <a href="http://smartalicewebdesign.com">Smart Alice Web Design</a>, smart web design for businesses who want a unique and effective presence on the internet.</p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/navigation/two-cool-web-sites/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Search Party</title>
		<link>http://smartalicewebdesign.com/wordpress/content-development/search-party/</link>
		<comments>http://smartalicewebdesign.com/wordpress/content-development/search-party/#comments</comments>
		<pubDate>Thu, 29 Oct 2009 14:20:44 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Content Development]]></category>
		<category><![CDATA[keywords and key phrases]]></category>
		<category><![CDATA[search engine optimization]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[using fonts]]></category>
		<category><![CDATA[web site content]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=284</guid>
		<description><![CDATA[UPDATE 1/26/10: The Boston Globe just published an article that echoes the opinions I expressed below. It includes the quote &#8220;Being charged $5,000 a month to manage the SEO process is crazy.&#8221; You can read the entire article at In Web world, a successful marketing effort means gaining inside track on searches Photo: from the [...]]]></description>
			<content:encoded><![CDATA[<p>UPDATE 1/26/10: The Boston Globe just published an article that echoes the opinions I expressed below.  It includes the quote &#8220;Being charged $5,000 a month to manage the SEO process is crazy.&#8221;  You can read the entire article at <a href="http://www.boston.com/business/technology/articles/2010/01/24/in_web_world_a_successful_marketing_effort_means_gaining_inside_track_on_searches/?page=1"><br />
In Web world, a successful marketing effort means gaining inside track on searches</a></p>
<p><img class="aligncenter size-full wp-image-285" title="search" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/10/search.jpg" alt="search" width="428" height="312" /></p>
<p>Photo: from the Mel Brooks movie &#8220;Young Frankenstein&#8221;</p>
<p>Search Engine Optimization (SEO) is a big deal these days.  For anyone who doesn’t already know what it is, it’s basically doing whatever you can to make sure your web site shows up on the first page of search results given a specific set of words (keywords).  You can pay a search engine directly for this or you can contrive through content manipulation to make it happen.</p>
<p>Before computers, how did a local business get noticed? Besides the usual marketing activities, you could  list your business in the yellow pages.  Remember the days when businesses named themselves “AAA Roofing” or “AAA Mattress” so they would show up first in their category?   Marketing companies are charging big money under the premise that they can use SEO to do the equivalent of “AAA” for you on the web.</p>
<p>There’s no doubt you can artificially promote your site, but I’m skeptical about what works and how much it’s worth.  For example,  I was hired to write web page content for a business I’ll call The Widget Company.   What I wrote was then sent to a 27 year old vice president of SEO at a high priced marketing firm. (That a 27 year old could be a vice president should be the first tip off something isn’t right.)</p>
<p>To increase the probability the web site would come up first whenever a user typed “widget” on Google,  he stuck the word “widget” in front of every possible noun he could, usually creating awkward noun strings.  And stuck the word “widget” inside of product names, creating incorrect product names.  He also introduced grammar and spelling errors. For this The Widget Company is paying a retainer of several thousand a month.  Does anyone besides me smell snake oil?</p>
<p><strong>Because The Widget Company is always running promotions of various types, there is no way to prove a cause and effect relationship between SEO and increased web site activity, in spite of the multitude of charts SEO people create to back up their claims.</strong></p>
<p>But one fact is irrefutable &#8211; SEO did create awkward to read text that would have also made the company look like yokels if I hadn’t been able to go back and correct the bad grammar and spelling.</p>
<p>Why is The Widget Company paying for it?  There is one answer – fear.  The management doesn’t understand technology and this creates insecurity. And, as long as everyone else is doing it, they’re afraid they’ll be left behind if they don’t do it, too.</p>
<p>There are some common sense practices to follow regardless of SEO. You do these things because they enhance user interface design, impart information, and help people navigate your site.</p>
<ul>
<li>Ascertain key phrases to identify your business and message and use them strategically – in page titles and headings, for example.</li>
<li>Write straightforward text and organize it logically.</li>
<li>Present it with legible, user intuitive typography.</li>
</ul>
<p>You can also artificially plug keywords into your content, but it probably won’t do much good.  Search engine companies are always rewriting search algorithms to ignore such tactics.</p>
<p>Lets do a reality check.  How many web sites are there in the world?  If you own a floral business, isn’t it sort of wacky to think you should come up on the first search page when there are 28,700,000 other florists out there?   However, Google is happy to list you on the first page when a user enters a type of  business and a zip code &#8211;   if you’ve included zip code/location information on your web site.  And that’s common sense, you shouldn’t have to pay thousands of dollars for it.</p>
<p>Frankly I’m skeptical of SEO and paying a bunch of money to snake oil salesmen preying on people’s lack of experience with technology.  Common sense, good writing, and strategic marketing along with intelligent web design should be all you need for visibility in your local market.</p>
<p>Commentary by <a href="http://smartalicewebdesign.com">Smart Alice Web Design</a>, smart web design for businesses who want a unique and effective presence on the internet.</p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/content-development/search-party/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Creating Your Web-Scape</title>
		<link>http://smartalicewebdesign.com/wordpress/navigation/creating-your-web-scape/</link>
		<comments>http://smartalicewebdesign.com/wordpress/navigation/creating-your-web-scape/#comments</comments>
		<pubDate>Wed, 08 Jul 2009 21:17:45 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Navigation]]></category>
		<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[bad web design]]></category>
		<category><![CDATA[good web design]]></category>
		<category><![CDATA[Layout]]></category>
		<category><![CDATA[smart web design]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[visual interpretation]]></category>
		<category><![CDATA[web navigation]]></category>
		<category><![CDATA[web site analysis]]></category>
		<category><![CDATA[web site design]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=241</guid>
		<description><![CDATA[One of my favorite photographers Bruce Percy says the following about creating a landscape photograph: &#8220;The strength of an image lies many times in what we exclude from it.  Putting more things into a scene can often dilute the strength of the message. Keeping it simple is key.&#8221; Web designers would do well to follow [...]]]></description>
			<content:encoded><![CDATA[<p>One of my favorite photographers <strong><a title="Click to go to Bruce Percy" href="http://www.brucepercy.com/" target="_blank">Bruce Percy</a></strong> says the following about creating a landscape photograph:</p>
<p>&#8220;The strength of an image lies many times in what we exclude from it. <strong> Putting more things into a scene can often dilute the strength of the message. </strong> Keeping it simple is key.&#8221;</p>
<p>Web designers would do well to follow this advice.  Similar to creating a landscape, creating a web site should isolate and focus on what&#8217;s important by carefully selecting and streamlining graphic components.  We create something ugly and unfriendly when we clutter a page with multiple ideas, extraneous information, or unnecessary functionality.  Choose one idea and execute it well.  Don&#8217;t add stuff just because you can.</p>
<p><img class="alignleft size-full wp-image-255" title="Redundant menus" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/07/2menus.jpg" alt="Redundant menus" width="128" height="787" /></p>
<p><span style="font-size: medium;"><span style="font-weight: bold;">Redundancy</span></span></p>
<p>For an example of what I&#8217;m talking about, let&#8217;s visit the <a href="http://www.harvardparkandrec.org/" target="_blank"><strong>Harvard Parks &amp; Recreation</strong></a> web site.  The left column provides links to the rest of the site.  When I mouse over the Main Page tab, the same content links appear (see screen shot on the left).  Why do I need to see the same links twice?</p>
<p><span style="font-size: medium;"><span style="font-weight: bold;">Ugly Graphics &#8211; and lots of them</span></span></p>
<p>There are three different graphics on the home page.</p>
<p><strong>Landscape photo &#8211; used as background for title.</strong> Note the gray, out of focus, pixelated photo.  If you can&#8217;t find a great photo locally (hard to believe), why not spend $3 for a decent image from iStockPhoto?  The landscape theme is relevant, though.  The message it conveys is &#8220;lake/recreation/swimming/boating/fishing.&#8221;</p>
<p><img class="aligncenter size-full wp-image-268" title="lake" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/07/lake2.jpg" alt="lake" width="261" height="152" /></p>
<p><strong>Tree logo in the left corner.</strong> Suggests a conservation theme.  Relevant?  Not really.</p>
<p><img class="aligncenter size-full wp-image-269" title="tree" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/07/tree.jpg" alt="tree" width="116" height="159" /></p>
<p><strong>Lawn &#8211; close up photo used as background.</strong> The obvious message to me is lawn care. Also worth noting are the unnecessary functions that create more visual clutter.  The text next to the check box is barely legible.  Just because it&#8217;s easy to count and display visitor numbers, doesn&#8217;t mean it should be included.</p>
<p><img class="aligncenter size-full wp-image-270" title="grass" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/07/grass.jpg" alt="grass" width="132" height="107" /></p>
<p>Three different graphics with three different meanings create visual and mental confusion.  Extraneous functions and poor design contribute to usability issues.</p>
<p><span style="font-size: medium;"><span style="font-weight: bold;">A Simple But Effective Layout</span></span></p>
<p>An example of a simple yet effective web site is that of screenwriter <a href="http://www.zenfreese.com/Zen_Freese/Home.html" target="_blank"><strong>Zen Freese</strong></a>.  The coffee stain graphic, the horizontal lines, and the tape are things that remind us of the writing process. We write at our desk, cup of coffee on top of the last draft, taping the latest revision to a page in progress.  Our tools, represented by the two fonts, are a typewriter and a pen.  The message is clear.  Nothing extraneous distracts us from the message.</p>
<p><img class="aligncenter size-full wp-image-271" title="zenfree" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/07/zenfree.jpg" alt="zenfree" width="425" height="264" /></p>
<p>Web design is about common sense way before it is about how much functionality or other junk you can stuff onto a page.  Keeping it simple for both impact and usability is key.</p>
<p>Commentary by <a href="smartalicewebdesign.com">Smart Alice Web Design</a>, smart web design for businesses who want a unique and effective presence on the internet.</p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/navigation/creating-your-web-scape/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>I&#8217;m Calling You</title>
		<link>http://smartalicewebdesign.com/wordpress/visual-design/im-calling-you/</link>
		<comments>http://smartalicewebdesign.com/wordpress/visual-design/im-calling-you/#comments</comments>
		<pubDate>Wed, 08 Apr 2009 06:34:48 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[smart web design]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[using fonts]]></category>
		<category><![CDATA[visual emphasis]]></category>
		<category><![CDATA[web site analysis]]></category>
		<category><![CDATA[web site design]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=221</guid>
		<description><![CDATA[“The web design of this web site is horrible.” My daughter was rather annoyed. She had looked up the web site of a local bookstore because she wanted to call them about a book. All she needed was the phone number. Her irritation increased the more she had to click around to find such an [...]]]></description>
			<content:encoded><![CDATA[<p class="MsoNormal">“The web design of this web site is horrible.”<span> </span>My daughter was rather annoyed.<span> </span>She had looked up the web site of a local bookstore because she wanted to call them about a book.<span> </span>All she needed was the phone number.<span> </span>Her irritation increased the more she had to click around to find such an obvious piece of information.<span> </span></p>
<p class="MsoNormal">How many businesses get caught up with slick, flashy web design but forget to take care of basic information?<span> </span>How many times have you had to click Contact Us to get to a phone number?<span> </span>I’ve visited <span> </span>sites where the phone number or location are seriously buried.<span> </span></p>
<p class="MsoNormal">
<p class="MsoNormal">If you want people to call you or locate your place of business, put that information in a prominent location on every page, and never beneath the fold.<span> </span>Consider other factors that contribute to visibility: contrast, font size and color, reverse type, and so forth.</p>
<p class="MsoNormal">
<p class="MsoNormal">Check out these business sites and see how long it takes you to find the phone number.</p>
<p class="MsoNormal"><a href="http://www.caselloelectric.com/index.php" target="_blank"><img class="alignleft size-thumbnail wp-image-225" title="Click here to go to Casello Electric" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/04/elec-150x150.jpg" alt="Click here to go to Casello Electric" width="150" height="150" /></a></p>
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal"><a href="http://www.calumetphoto.com/" target="_blank"><img class="alignleft size-thumbnail wp-image-222" title="Click here to go to Calumet Photo" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/04/camera-150x150.jpg" alt="Click here to go to Calumet Photo" width="150" height="150" /></a></p>
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal"><span><a href="http://www.srbc.com/default.asp" target="_blank"><img class="alignleft size-thumbnail wp-image-227" title="Click here to go to SRBC" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/04/srbc-150x150.jpg" alt="Click here to go to SRBC" width="150" height="150" /></a><br />
</span></p>
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal"><span><br />
</span></p>
<p style="margin-top:120px;">
Analysis by <a href="http://smartalicewebdesign.com"><strong>Smart Alice Web Design</strong></a>, smart web design for businesses who want a unique and effective presence on the internet.</p>
<p>Copyright 2009, Alice Gebura, All Rights Reserved.</p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/visual-design/im-calling-you/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
