<?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>W3 EDGE &#187; User Interface / Experience</title> <atom:link href="http://www.w3-edge.com/weblog/category/user-interface-experience/feed/" rel="self" type="application/rss+xml" /><link>http://www.w3-edge.com</link> <description>Innovation Redefined</description> <lastBuildDate>Wed, 10 Mar 2010 07:09:33 +0000</lastBuildDate> <generator>http://wordpress.org/?v=2.9.2</generator> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <atom:link rel="hub" href="http://pubsubhubbub.appspot.com"/><atom:link rel="hub" href="http://superfeedr.com/hubbub"/> <item><title>The Quest for Speed</title><link>http://www.w3-edge.com/weblog/2009/12/the-quest-for-speed/</link> <comments>http://www.w3-edge.com/weblog/2009/12/the-quest-for-speed/#comments</comments> <pubDate>Thu, 03 Dec 2009 10:52:40 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Technology]]></category> <category><![CDATA[User Interface / Experience]]></category> <category><![CDATA[Web Development]]></category> <category><![CDATA[caching]]></category> <category><![CDATA[google ranking]]></category> <category><![CDATA[http transactions]]></category> <category><![CDATA[progressive render]]></category> <category><![CDATA[sprites]]></category> <category><![CDATA[steve souders]]></category> <category><![CDATA[web site optimization]]></category> <category><![CDATA[wordpress performance]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/2009/12/622/</guid> <description><![CDATA[More than a trend, web application performance, user experience and performance optimization are finally being recognized as the building blocks of successful sites. Google is taking a leading role today in increasing awareness about the role of speed in improving user experience and driving revenue.]]></description> <content:encoded><![CDATA[<p><img src="http://cdn.w3-edge.com/wp-content/uploads/2009/12/iStock_000003253552Large.jpg" alt="iStock_000003253552Large" title="iStock_000003253552Large" width="400" height="266" class="alignright size-full wp-image-629" />For web applications today speed is not just about bragging rights, instead speed is a deciding factor in: reducing the learning curve of applications for end users, increasing the adoption rate, improving conversion rates, growing time on site and numerous other metrics for web sites.</p><p>Historically, search engine companies (Google, Yahoo!, Bing etc) are among the original innovating web application developers and their success has afforded them with the resources to learn how to scale applications. In particular, Google has been <a href="http://code.google.com/speed/articles/" rel="external">working diligently</a> (as does <a href="http://developer.yahoo.com/performance/rules.html" rel="external">Yahoo</a>) to contribute to the web developer community, increasing awareness and providing research about creating good experiences with web content. Today they&#8217;ve even released their solution to the performance issues surround Domain Name Service (DNS) and with their <a href="http://googleblog.blogspot.com/2009/12/introducing-google-public-dns.html" rel="external">Google Public DNS</a> project. DNS is the process by which your browser determines which server to query for the pages you request.</p><p>It has probably always played a role in the background in some way, but is now a talking point &mdash; the speed of a web site is instrumental in how Google determines the rank of your site in search engine result pages. While there may be <a href="http://mashable.com/2009/11/15/google-ranking-speed/" rel="external">numerous opinions</a> on the topic, the fact remains that speed is vital to a positive user experience and a healthy eco-system, so those facts make any opinions quite moot. You can now find Google&#8217;s opinion on the speed of your web site in Webmaster Tools, in <a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&#038;answer=158541" rel="external">the site performance</a> section (currently still a labs feature). Take a look and see how your site compares to the rest of the web.</p><p>WordPress is an extremely popular open source content management system and publishing tool. I contribute to the performance of WordPress via <a href="http://wordpress.org/extend/plugins/w3-total-cache/" rel="external">W3 Total Cache</a>, which (from a bird&#8217;s eye view) accomplishes a number of goals:</p><ul><li>Make servers more green by reducing the resource demands in delivering dynamic content</li><li>Reduce load time of sites, thereby providing the benefits stated above</li><li>Allow bloggers and other WordPress plugin developers to continue to focus on producing content and easy-to-deploy functionality for WordPress without having to worry about performance penalties / implementation issues or keep an eye on their WordPress installation.</li></ul><p>The action items to implement the largest performance wins for web applications traditionally include the following:</p><ul><li><strong>Progressive render: </strong>It&#8217;s imperative that CSS and JavaScript are properly embedded into web pages to ensure that the user begins to see content displaying as quickly as possible. The term progressive render literally implies that the web site loads instantly with a water fall effect rather than showing users a white page for several seconds and drawing the entire page at once. Proper use of this technique is realized through careful placement and embedding of CSS and JavaScript in the head of the page. As well as loading JavaScript near the end of the page in addition to using pipelining techniques to overcome download limitations in some browsers.</li><li><strong>Reduce HTTP Transactions:</strong> This technique takes shape in 3 ways:<p> HTTP Compression: the smaller the file, the faster it can be generated, sent and rendered or executed. Gzip or deflate compression is supported by modern browsers and is one of the most fundamental performance wins in web development.</p><p> Minification: the staple technique of Yahoo.com, Google.com and Bing.com for years and instrumental in the &#8220;1 second page loads&#8221; they appear to have. Combining CSS and JavaScripts respectively, removing white space, comments, line breaks and even inserting CSS and JavaScript inline in the document, (if also compressed) ensures that the least amount of data is sent to the browser.</p><p> <a href="http://spriteme.org/" rel="external">Image Sprites</a>: combining multiple images into a single file and using CSS to manipulate them on the page. Since your browser will download a larger image faster (in practice) than numerous <a href="http://www.gracepointafterfive.com/punypng" rel="external">smaller images</a>, this is a real performance win when coupled with browser-side caching.</p><p> These methods make sure that there are fewer &#8220;calls&#8221; to a web server to deliver a page. When it comes to performance, less is more.</li><li><strong>Caching:</strong> Cache everything and cache often! Words to that effect are the mantra of hard core web developers. This technique includes setting expiration time for CSS, JavaScript, and images etc that are downloaded from your site. It also includes, caching pages, database queries, RSS feeds and so forth so that your web server spends time sending content instead of generating it. Don&#8217;t forget that Content Delivery Networks are also a very important type of cache that significantly reduce the latency of content intended for a global audience.</li></ul><p>Will it ever be enough? Doubtful. And there&#8217;s much more to it than the few items I listed. Google is already more than kicking tires on their new take on <a href="http://blog.chromium.org/2009/11/2x-faster-web.html" rel="external">how web enabled devices should communicate</a>. A very ambitious endeavor, but for Google who is bold enough to deploy HTML5 on their main property (Google.com), I&#8217;d have to say that they&#8217;ve got the resources to see it through. And as always it&#8217;s easy to see the wake of <a href="http://stevesouders.com/" rel="external">Steve Souders&#8217;</a> contributions to web application performance – no doubt a vital contributor at Google (the <a href="http://code.google.com/speed/page-speed/download.html" rel="external">page speed Firefox plugin</a>?), formerly of Yahoo fame.</p><p>The takeaway is this, on the horizon, there will be more talk about the performance of your site and that in turn will raise the bar and awareness in the open source community about how to make high performance applications, the reasons to do it and with which tools to measure those results.</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2009/12/the-quest-for-speed/feed/</wfw:commentRss> <slash:comments>12</slash:comments> </item> <item><title>5 Principles to Maximize Conversion Rate &amp; Usability</title><link>http://www.w3-edge.com/weblog/2007/05/5-principles-to-maximize-conversion-rate-usability/</link> <comments>http://www.w3-edge.com/weblog/2007/05/5-principles-to-maximize-conversion-rate-usability/#comments</comments> <pubDate>Wed, 02 May 2007 15:20:10 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[E-Commerce]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[User Interface / Experience]]></category> <category><![CDATA[conversion rate optimization]]></category> <category><![CDATA[search marketing]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/15-principles-to-maximize-conversion-rate-usability/</guid> <description><![CDATA[Dan Thies over at SEO Research Labs has pointed out a remarkable video by Andy Edmonds. He and his team have used statistical analysis to study how the eye and brain process information while interacting with web sites! First a definition: &#8220;Foveal View&#8221; &#8212; The area of visible space where the user is best able [...]]]></description> <content:encoded><![CDATA[<p>Dan Thies over at <a href="http://www.seoresearchlabs.com/" rel="external">SEO Research Labs</a> has pointed out a remarkable video by <a href="http://www.stompernet.net/" rel="external">Andy Edmonds</a>. He and his team have used statistical analysis to study how the eye and brain process information while interacting with web sites!</p><p>First a definition:<br /> &#8220;Foveal View&#8221; &mdash; The area of visible space where the user is best able to focus with maximum detail. The point here is that outside of the focal area the eye (and therefore the mind) is not perceiving color nor as much detail. Understanding this concept cascades into the takeaways that follow.</p><p>Now some highlights from Andy&#8217;s portion of the video + my two cents:</p><ol><li>The traditional marriage to <a href="http://www.jasonsantamaria.com/archive/2007/01/22/you_say_you_want_a_resolution.php" rel="external">800&#215;600 optimized design</a> is really on it&#8217;s way out (as many people have noticed looking at their <a href="http://www.w3schools.com/browsers/browsers_stats.asp" rel="external">site statistics</a>). Instead wider screen layouts not only bring more content above the fold, reducing the amount of scrolling required to use a page, but they also compliment a user&#8217;s natural behavioral desires while using a site,</li><li>Page elements should be organized in such a way that relevant blocks of information are near each other so that the brain can make logical associations and accurately assess relevance while scanning a page,</li><li>&#8220;Information Blocks&#8221; should be wider than tall for easiest consumption &mdash; again this is in step with the wider layout point above,</li><li>Typography &amp; whitespace use (contrast) are also as important as ever; when properly used they create a guide to lead the eye through blocks of content in the body of a page or in navigational areas.</li><li>Group navigation items to contain 7 +/- 2 options per group. This avoids forcing the user to stop and process the information. In other words, use this principle to create at-a-glance usability in your navigation, which is vital to conversion.</li></ol><p>Heat mapping sites like the following are useful in understanding the result of the eye/brain interaction. Use the insight above to review your design and your heat map results to identify problem areas in your user interface design. Here are some popular tools:</p><ul><li><a href="http://crazyegg.com/" rel="external">crazyegg</a></li><li><a href="http://www.clickdensity.com/" rel="external">clickdensity</a></li><li><a href="http://clicktale.com/" rel="external">ClickTale</a></li></ul><p>Let&#8217;s not forget <a href="http://www.google.com/analytics/" rel="external">Google Analytics</a> (Urchin) is useful when using the &quot;Site Overlay&quot; view in also seeing which anchors are most clicked in your site.</p><p>However, what we&#8217;ve long called &#8220;<acronym title="Eyeball Optimization">EBO</acronym>&#8221; or <a href="/weblog/eye-ball-optimization-most-desired-action/">Eyeball Optimization</a> is explained masterfully by Andy &mdash; Well done!</p><p>Since I&#8217;m not sure how long that video will be in place so here&#8217;s the &#8220;<a href="http://vidego.multicastmedia.com/player.php?v=742ed7584a4ffafefff5d79d1ffcb6cb4638ced1" rel="external">permalink</a>.&#8221;</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2007/05/5-principles-to-maximize-conversion-rate-usability/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Interweb Evolution</title><link>http://www.w3-edge.com/weblog/2007/04/interweb-evolution/</link> <comments>http://www.w3-edge.com/weblog/2007/04/interweb-evolution/#comments</comments> <pubDate>Mon, 23 Apr 2007 13:18:28 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[CSS / Markup / Code]]></category> <category><![CDATA[Technology]]></category> <category><![CDATA[User Interface / Experience]]></category> <category><![CDATA[Web Development]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/interweb-evolution/</guid> <description><![CDATA[Many of you out there have seen this already, but I had to point to something at good old you tube that&#8217;s simply well done and insightful. With all of the confusing content out there and controversial definitions, it&#8217;s great to be able to sit back and watch the story of the interweb evolution  [...]]]></description> <content:encoded><![CDATA[<p>Many of you out there have seen this already, but I had to point to something at good old you tube that&#8217;s simply well done and insightful. With all of the confusing content out there and <a href="http://web2.0validator.com/" rel="external">controversial definitions</a>, it&#8217;s great to be able to sit back and watch the story of the interweb evolution  unfold in such a meaningful presentation (it reminds me quite fondly of the evolutions web designers themselves made as we embraced web standards and <a href="http://mboffin.com/stuff/designline-openair.gif" rel="external">CSS based web design</a>). Check it out below or at <a href="http://www.youtube.com/watch?v=6gmP4nk0EOE" rel="external">YouTube</a>.</p><p align="center"><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/6gmP4nk0EOE"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/6gmP4nk0EOE" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object></p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2007/04/interweb-evolution/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Web Design Sensibilities Have Changed</title><link>http://www.w3-edge.com/weblog/2006/11/web-design-sensibilities-have-changed/</link> <comments>http://www.w3-edge.com/weblog/2006/11/web-design-sensibilities-have-changed/#comments</comments> <pubDate>Wed, 01 Nov 2006 12:56:54 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[Graphic Design]]></category> <category><![CDATA[Social Media Marketing]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[User Interface / Experience]]></category> <category><![CDATA[Web Design]]></category> <category><![CDATA[Web Development]]></category> <category><![CDATA[web design trends]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/web-design-sensibilities-have-changed/</guid> <description><![CDATA[Web design sensibilities have changed. The motifs found in sites like the following go far beyond their community driven content:craigslist by Craig Newmark &#38; Jim Buckmaster friendster by Jonathan Abrams meetup by Scott Heiferman, Peter Kamali &#38; Matt Meeker Linkedin by Reid Hoffman Last.fm by Martin Stiksel Feed Burner by Dick Costolo digg by Kevin Rose technoratti by David Sifry del.icio.us by Joshua Schachter flikr [...]]]></description> <content:encoded><![CDATA[<p>Web design sensibilities have changed.</p><p>The motifs found in sites like the following go far beyond their community driven content:</p><ul><li><a rel="external" href="http://www.craigslist.org/">craigslist</a> by Craig Newmark &amp; Jim Buckmaster</li><li><a rel="external" href="http://www.friendster.com/">friendster</a> by Jonathan Abrams</li><li><a rel="external" href="http://www.meetup.com/">meetup</a> by Scott Heiferman, Peter Kamali &amp; Matt Meeker</li><li><a rel="external" href="http://www.linkedin.com/">Linkedin</a> by Reid Hoffman</li><li><a rel="external" href="http://www.last.fm/">Last.fm</a> by Martin Stiksel</li><li><a rel="external" href="http://www.feedburner.com/">Feed Burner</a> by Dick Costolo</li><li><a rel="external" href="http://www.digg.com/">digg</a> by Kevin Rose</li><li><a rel="external" href="http://www.technorati.com/">technoratti</a> by David Sifry</li><li><a rel="external" href="http://del.icio.us/">del.icio.us</a> by Joshua Schachter</li><li><a rel="external" href="http://www.flickr.com/">flikr</a> by Caterina Fake &amp; Stewart Butterfield</li><li><a rel="external" href="http://www.youtube.com/">YouTube</a> by Chad Hurley, Steve Chen &amp; Jawed Karim</li><li>the list goes on and on&#8230;</li></ul><p>Many of these sites have been around for more than a decade and ultimately changed the paradigm of how we use the web, (Tim O&#8217;Reilly <a rel="external" href="http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html">discussed</a> after the fact in 2005). However it wasn&#8217;t until recently that the trends in design that began with these sites finally gave birth to new design sensibilities as well.</p><p>Not too long ago, building a community online just meant that people bookmark your site and visited it frequently. Perhaps a site owner pumped out some newsletters to drive subscribers back to the site or partner sites had links to your properties to remind various visitors that you exist. When RSS appeared, it helped people stay abreast of the latest content pushed out from content owners. More recently we work and play in a world where the community owns the content, and if they are so bold, the site owners are only moderators (and the guys that pay the web hosting bills). Great examples are the <a rel="external" href="http://www.guardian.co.uk/weekend/story/0,,1939018,00.html">Wikis</a> (well done Jimmy Wales) we all know and love — good old &#8220;<a href="http://en.wikipedia.org/wiki/Folksonomy">folksonomy</a>&#8220;. Having said that, we&#8217;re also in a world where anyone&#8217;s voice can be heavily syndicated and tagged as worthy of note, which is a beautiful thing&#8230;</p><p>Let me get back to the point before I get lost in the history of forums as the original online communities. Now that a community can control the content and determine what is relevant and important, the visual language that we as web designers are now using has changed significantly as well. Today we <a rel="external" href="http://www.webdesignfromscratch.com/dont_decorate_communicate.cfm">communicate instead of decorate</a> (as Phil Brisk put it so succinctly) with design aesthetics — with the focus on content, that&#8217;s exactly how things should be. A nice post at <a rel="external" href="http://www.webdesignfromscratch.com/current-style.cfm">webdesignfromscratch.com</a> discusses this trend pretty well imho. These design trends have finally even cascaded into corporate design sensibilities which once accounted for the majority of the design work we designers are asked to perform.</p><p>Characteristics like:</p><ul><li>a focus on <a rel="external" href="http://www.mikeindustries.com/sifr/">typography</a>,</li><li>larger font sizes in navigation and copy,</li><li>use of white space and centered page positioning,</li><li>graphically rich layered layouts often using some 3D design elements or icons,</li><li>layouts that compliment the copy in a page and showcase it with sharp color accents where appropriate,</li><li>diligent use of CSS and table-less markup with a demonstrated understanding of semantics, accessibility, usability and open standards</li></ul><p>It seems to me that also the <a rel="external" href="http://www.direct.gov.uk/DisabledPeople/fs/en"><acronym title="Disability Discrimination Act">DDA</acronym></a> legislation in the UK contributed to the &#8220;Web 1.5&#8243; as markup that used standards, semantics and exhaustive CSS designs began to take hold and foster a renaissance in the approach to usable and accessible site design. We still don&#8217;t see the abundance of layouts that are designed for a resolution higher than 800&#215;600, but this trend is mostly a function of the audience for many of the clients out there looking for our services. In custom business web design, there are of course a number of restrictions that deter us from employing a wider fixed-layout, perhaps that will change as well soon enough.</p><p>Thanks to all of  those folks highlighted in this post for enabling me to support my thoughts on <a href="/">custom business web design</a> with supporting opinions. I hope this blog will be a destination in the community soon enough.</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2006/11/web-design-sensibilities-have-changed/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Landing Page Usability</title><link>http://www.w3-edge.com/weblog/2006/07/landing-page-usability/</link> <comments>http://www.w3-edge.com/weblog/2006/07/landing-page-usability/#comments</comments> <pubDate>Sat, 15 Jul 2006 08:26:36 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Copywriting]]></category> <category><![CDATA[User Interface / Experience]]></category> <category><![CDATA[Web Design]]></category> <category><![CDATA[conversion rate optimization]]></category> <category><![CDATA[search marketing]]></category> <category><![CDATA[landing page optimization]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/landing-page-usability/</guid> <description><![CDATA[A landing page has a specific purpose — to initiate the most desired action (MDA). Here's how you can create landing pages that deliver the MDAs you're looking for.]]></description> <content:encoded><![CDATA[<h3 class="first">&raquo; More Than Just the Curiosity Factor</h3><p>A landing page is the page that visitors first see after becoming curious enough to click on a link to your site. The link may be found on search engine results pages, within a specifically-targeted email, on the site&#8217;s navigation toolbar or within another website.</p><p>In many cases, these are links you pay for. The organic results delivered by SERPs are free, but, unless your site appears on the first two SERPs, it&#8217;s unlikely that visitors will connect.</p><p>In many cases, the landing page is the site&#8217;s home page &mdash; but not always, even within SERPs. Landing pages can appear anywhere within a web site.</p><p><b>Paid Links Demand ROI</b><br />If your landing page receives prominent display within search engine results pages, congratulations. Upward of 50% of visitor traffic found that landing page through an SE query. However, only 20 to 25 sites can appear on page one of Google&#8217;s SERPs. What about the other 10,000 links Google delivers to its users?</p><p>Often, smaller sites employ paid links to drive site traffic. Google Adwords, for example, is a PPC (pay per click) means of building business. The important point is this: PPC programs have to more than pay for themselves in order for your site to remain a viable business.</p><p>Any form of paid linkage to one of your landing pages must deliver a nice ROI. And to do that, you need a fully-usable, engaging landing page. Otherwise, visitors won&#8217;t stick around long enough to read about your low prices and free shipping.</p><p><b>The Purpose of the Landing Page</b><br />While all site pages have a purpose (at least on well-designed sites) a landing page typically has a special or singular purpose: to sell a particular item, to announce a product sale, to entice visitors to opt in, complete a questionnaire or perform some other MDA (most desired action).</p><p>First determine the MDA the landing page addresses. Then, design everything &mdash; from headlines and text to graphics and pictures &mdash; to support the completion of the MDA.</p><p>Try to keep to one MDA per landing page. Again, the landing page has a specific purpose. Extraneous information, slow-loading videos and a confusing call to action are distractions, along with affiliate links, text links and unnecessary animations. All distract the attention of the viewer from your MDA.</p><p><b>Landing Page Design Principles</b></p><ol><li><p>Create a headline that accomplishes the following:</p><ul><li>tells the visitors that they&#8217;re on the right page;</li><li>clearly states the purpose of the landing page &mdash; the MDA;</li><li>engages the visitor, piques interest, encourages the reader to continue.</li></ul><p>The headline should be a grabber and appear &#8220;above the fold&#8221; &mdash; the top of your home page. That&#8217;s the most valuable real estate on your site.</p></li><li>Use short blocks of text and single sentences surrounded by negative space (white). Visitors tend to scan rather than read the entire page, even if the text is pure poetry.</li><li>And because readers <u>scan</u> instead of <u>read</u> site text, use lots of headers, sub-heads and bullet lists.</li><li>The first sentence of each block of text should provide the critical information you want to impart, again because visitors scan, often reading just the first sentence of a paragraph or block of text.</li><li>Employ an unambiguous call to action. &#8220;Order Now!&#8221; &#8220;Call now before you forget!&#8221; Leave no doubt what action is expected of the visitor. Calls for action can appear throughout the landing page text and a call to action should be the last thing visitors read.</li><li>Choose a type font that&#8217;s easy on the eyes. Avoid script fonts and fonts with lots of curly-Qs.</li><li>If the landing page sells one or more products, provide visitors with pictures of the products.</li><li>Prices, including shipping and handling costs, should appear below the fold. But they should definitely appear.</li></ol><p><b>Creating a Prominent Landing Page</b><br />If your landing page is also the home page, by definition it has prominence to visitors and to search engine spiders. However, if your landing page or pages are within the site, it&#8217;s important to make sure search engine spiders recognize the importance of this page within the site &mdash; its <u>prominence</u>.</p><p>Spiders use a number of criteria to determine a particular page&#8217;s prominence within the context of the entire site. Location is one criterion &mdash; the more clicks away from the home page, the less prominent &mdash; at least to the limited capabilities of current search engines.</p><p>Text is another criterion used to assess prominence. Keywords, keyword density and an automated comparison of keywords in the text against keywords in various HTML tags is another indicator of a page&#8217;s prominence.</p><p>Finally, the number of links pointing to a particular page is an important factor in assessing page prominence. The more links connecting other pages to your landing page, the more prominent it will be to search engines when your site is indexed.</p><p>This is especially important when landing page product offerings differ significantly from other products sold on the site. Search engines employ a mathematical taxonomy to classify each site within a particular category. So, if you market educational toys but introduce a landing page offering children&#8217;s books, it&#8217;s important for search engines to reevaluate the site&#8217;s taxonomy and to expand the site&#8217;s classification to include &#8217;sellers of children&#8217;s books&#8217;. One way to do this is to create links within the site all pointing to the landing page.</p><p>Landing pages are useful as motivators, as site directories, information sources and for many other valuable purposes. However, the development of an effective landing page takes careful thought and an understanding of what drives both humans and search engine spiders.</p><p>Generate increased site traffic and improve your conversion rate with a well-designed, well-written, well-placed and well-connected landing page on your site.</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2006/07/landing-page-usability/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Information Architecture</title><link>http://www.w3-edge.com/weblog/2006/07/information-architecture/</link> <comments>http://www.w3-edge.com/weblog/2006/07/information-architecture/#comments</comments> <pubDate>Sat, 15 Jul 2006 08:24:01 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[Accessibility]]></category> <category><![CDATA[Articles]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[User Interface / Experience]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/information-architecture/</guid> <description><![CDATA[Your site's information architecture is intended to enhance visitors' on-site experience, making it easier for them to find what they're looking for, and gently directing them around the site. Here are some "must-haves" on refining the organization of your site's content.]]></description> <content:encoded><![CDATA[<h3 class="first">&raquo; Structure Your Site for Success</h3><p>There&#8217;s a lot more to site design that choosing some attractive colors and a cool font. In fact, one of the most important considerations is often overlooked by first-time site owners. Content architecture. Where does content appear? Why on that page? How much is enough? What is the objective of the content?</p><p>If you haven&#8217;t thought about these questions (and many more) you may get lucky, but it&#8217;s not very likely. If you don&#8217;t consider content architecture in the design of your site, your site won&#8217;t perform at optimized levels. It&#8217;s as simple as that.</p><p><b>IMPACT: The Importance of Content Architecture</b><br />The value of a solid content architecture is, quite simply, the impact it has on visitors. Visual impact. Emotional Impact. Motivational impact. It&#8217;s all got to be there. Hi-impact elements?</p><p><b>Attention grabbing headlines.</b></p><p><b>Short, blocks of simple text. Short sentences.</b></p><p><b>Hi-impact verbs: Discover, Learn, Save, Earn, Uncover &amp; so on.</b></p><p><b>Lots of sub-headings that lead the eye from top-to-bottom, left-to-right on each page.</b></p><p><b>Useful graphics that support the brand or products (not stale, seen-it-before clip art).</b></p><p><b>Clear, hi-resolution product pix (not something you shoot on the kitchen table).</b></p><p><b>A logical, easily discernable flow of content &amp; sales copy, interwoven to clearly point out the product or service benefits, i.e. define (or create) visitor&#8217;s needs then meet those needs.</b></p><p><b>Use bulleted lists to present lots of facts in an accessible format.</b></p><p><b>And finally, throw the punctuation &amp; grammar handbook out the window. Avoid punctuation. Periods and a stack of exclamation points provide stopping points for readers and you don&#8217;t want them to stop reading.</b></p><p><b>Why Is This Important To Me?</b><br />You&#8217;re launching (or redoing) your site for some reason &mdash; to sell products, to market services, to spread the organization&#8217;s mission statement or, perhaps a combination of reasons. Regardless, the reason(s) you&#8217;re considering a web site or revision is your <u>objective</u> for the site.</p><p>Can you state your site&#8217;s objective succinctly? In a single sentence? You should be able to sum it all up in just a few words. Then, with your site objectives firmly set, you can go about the business of developing and placing content, i.e. designing the site&#8217;s content architecture.</p><p>Without a crystal clear site objective, you won&#8217;t know what text to put where. Take the time to define your expectations and objectives before moving ahead with any matters of site design.</p><p><b>Why Is This Important to Visitors?</b><br />Visitors come to your site for one reason &mdash; content. If you&#8217;re selling running shoes, visitors expect content related to your products. This, of course, starts with clear, detailed product descriptions and pictures of each pair of Nikes. No pictures, no sales. People like to see what they&#8217;re buying (a big part of content architecture).</p><p>But visitors today want more than clear, clean product descriptions. They want informational content &mdash; useful information on running as a sport, as a discipline, as part of a healthy lifestyle. Not sales hype, just good, accurate, useful information.</p><p><b>Enhancing the Visitor&#8217;s Experience</b><br />That&#8217;s what we&#8217;re really talking about when the subject of content architecture comes up. How can you make the visitor&#8217;s on-site experience better, easier, faster or more fun? For example, from the home page, how many clicks does it take to find a specific product with a detailed product description? If a visitor has to click through one drilldown screen after another, at least some of them are going to give up.</p><p>Placement of content, so that it&#8217;s easily accessible, is one way to enhance the visitor&#8217;s experience on your site. That means lots of tabs, links and breadcrumb trails to keep visitors on point.</p><p>Many sites separate promotional content from informational text. They employ an &#8216;Archives&#8217; link or a &#8216;Resources&#8217; tab. This helps in more clearly delineating the purpose of the text in the minds of visitors and to SE spiders that visit your site regularly.</p><p><b>Why Is Content Architecture Important to SEs?</b><br />Despite the complexity of today&#8217;s SE algorithms, SE bots aren&#8217;t bright. They can&#8217;t make subjective judgments or decisions about content, they can&#8217;t define relationships between different bodies of text and they can&#8217;t always find new content, especially when it&#8217;s buried deep inside the site.</p><p>But there&#8217;s lots you can do to better equip SE spiders to accurately assess and index your site with a well-designed content architecture.</p><p>It all starts with the site&#8217;s design and the knowledge and competencies of the designer. For example, spiders read headlines so make sure your home page has clear headings and sub-heads. Use more than one column on your home page to present two or three headlines to site visitors in an easily-readable layout.</p><p><b>Highlight This Week&#8217;s Specials</b><br />Right there on the home page, above the fold. In big, bold type. That way, visitors can&#8217;t miss them.</p><p>However, make sure your weekly specials text doesn&#8217;t appear inside a jpg or some other non-text format. Text in a graphics image is invisible to spiders. Make sure key text is accessible to SE spiders by keeping it in a &#8216;readable&#8217; format.</p><p><b>Identify and Refine</b><br />Using various visitor tracking tools you&#8217;ll be able to quickly identify problems in content architecture &mdash; anything from a dead end with no way out to an underperforming landing page.</p><p>Develop a sound content architecture, but be prepared to make adjustments and refinements based on real-world site metrics. Consider content architecture a work in progress. Try a new placement, monitor visitor reactions and adjust accordingly.</p><p><b>Balancing Bots and Eyeballs</b><br />SE bots don&#8217;t buy things. People do. So, first and foremost, your commercial site must have human eyeball appeal. It must capture the visitor&#8217;s attention and hold his or her interest long enough to make a few exploratory clicks to learn more about your site and products.</p><p>But if you ignore the SE bots, you may be only partially indexed, under-indexed or even mis-indexed based on search engine taxonomy, and that can be difficult to overcome. Content architecture must be designed for human needs and emotions and for the limited capabilities of SE spiders.</p><p>Only then can you fully optimize the attraction of your site to both bots and eyeballs.</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2006/07/information-architecture/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Eye Ball Optimization. Most Desired Action.</title><link>http://www.w3-edge.com/weblog/2006/06/eye-ball-optimization-most-desired-action/</link> <comments>http://www.w3-edge.com/weblog/2006/06/eye-ball-optimization-most-desired-action/#comments</comments> <pubDate>Thu, 15 Jun 2006 08:21:47 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Copywriting]]></category> <category><![CDATA[User Interface / Experience]]></category> <category><![CDATA[conversion rate optimization]]></category> <category><![CDATA[market analysis]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/eye-ball-optimization-most-desired-action/</guid> <description><![CDATA[There are plenty of SEO strategies that actually work against making a sale. If your site isn't eyeball optimized (EBO) it isn't optimized, period. Remember, no search engine ever bought anything on-line.]]></description> <content:encoded><![CDATA[<h3 class="first">&raquo; Call to Action &amp; Conversion</h3><p>Too often, site owners design site pages and generate site text based on their personal likes and dislikes. It&#8217;s a natural thing to do. But, is it the smart thing, the right thing to do? The answer lies in every site owners&#8217; understanding of what attracts and keeps humans on site and on point to perform the most desired action (MDA).</p><p><b>SEO Falls Short</b><br />It&#8217;s not about SEO. SEO is, by definition, designed to optimize the site for accurate, complete and beneficial search engine indexing. It only marginally applies to the drives and motivations of those with credit cards. Buyers. In fact, many SEO strategies actually work <u>against</u> visitors performing the MDA. Keyword dense text, for example, often reads like spamglish. SEs may like it. It&#8217;s off-putting to many humans.</p><p>The focus on SEO should take place in the design of the site&#8217;s &#8220;backstage&#8221; architecture, hidden from the audience. Eyeball optimization (EBO) takes place on the presentation layer. SEO gets them there. EBO keeps them there and converts visitors to buyers.</p><p><b>Eyeball Optimization</b><br />Often the most overlooked aspect of site design is the first impression it makes on visitors. It takes the average visitor less than 10 seconds to decide if a site is what s/he is looking for. That means the home page has to be right on target.</p><p>Right color scheme. Right text font. Right tone to the copy. Right graphics and images. But how do you know what&#8217;s right?</p><p>First, define your target demographic with the utmost specificity. This is the ideal buyer for your products or services. Imagine this individual. Determine and list all of the following:</p><ul><li>male or female</li><li>age</li><li>education level</li><li>income level</li><li>associated interests &amp; hobbies</li><li>core personal values</li><li>community status and association</li><li>family size; family role</li><li>core needs</li><li>desires and expectations</li></ul><p>This often requires making reasonable assumptions regarding visitors. For example, if you&#8217;re site markets high-end homes, it&#8217;s safe to assume that serious visitors come from high income brackets. Conversely, if you&#8217;re marketing legal bankruptcy services, it&#8217;s safe to assume that income levels don&#8217;t meet spending levels.</p><p>Second, <u>don&#8217;t</u> go with what appeals to your tastes, likes and dislikes. You&#8217;re much too close to the project to determine the &#8220;rightness&#8221; of the chosen color motif. But, it&#8217;s easy enough to research what works and what doesn&#8217;t. Just Google up the top-tier competition to see what colors they&#8217;ve chosen. You can&#8217;t copyright colors and you don&#8217;t have to be a graphic artist. Don&#8217;t re-invent the wheel. Just do a little research.</p><p>Third, consider questions of accessibility. How accessible is the site&#8217;s message? This includes everything from the readability of the type (size and font) to the number of clicks a visitor must make to reach the MDA. The more clicks, the fewer MDAs.</p><p><b>The Value of MDA Analysis</b><br />An analysis of the marketplace, and the development of a target demographic, contribute to the completion of the MDA by increased numbers of visitors (higher conversion rate).</p><p>With commercial sites, the most desired action is to get visitors to buy something. That&#8217;s why you&#8217;re there. But as an MDA, &#8220;Get them to buy something&#8221; is too expansive. It&#8217;s not specific enough.</p><p>A broadly-stated MDA is much less helpful than a specific MDA. With a specific action in mind, your site&#8217;s design, layout, architecture and site text can be more specifically targeted to encourage visitors to perform the MDA.</p><p>What do you want visitors to buy? How much would you like each buyer to spend? How important are repeat buyers? What are the stumbling blocks between the visitor and the MDA? Answer these questions and your well on your way to designing a site that delivers the highest possible conversion rate.</p><p>Here&#8217;s a sample of a specific MDA designed for a site selling after-sale motorcycle accessories: I want men under 40, who ride motorcycles and have discretionary income, to purchase at least two items with a combined retail value above $50 on their first visit. I want that buyer to return within six months to make another purchase of equal or greater value.</p><p>With an MDA like this, the site owner is in a much better position to:</p><ul><li>define demographic motivations (price, status, problem solver, etc.)</li><li>design a site that appeals to this individual</li><li>set product prices and pre-determine margins</li><li>write copy appropriate to the demographic</li><li>develop an actionable strategy to retain customers</li><li>meet and exceed expectations of visitors</li></ul><p><b>The Call to Action</b><br />Believe it or not, many site owners skip this essential element of overall site design. The call to action tells the visitor what to do. For example, when you hear advertisements on the radio or TV, they often end with the words &#8220;Call today&#8221; Act now&#8221; or &#8220;Don&#8217;t wait another minute.&#8221; These are calls to action, telling listeners what the next step is. &#8220;Pick up the telephone and place your order. Do it now before you forget!&#8221;</p><p>Calls to action should be spread throughout any website. These calls to action should also be contextual, providing visitors directions on what they should do next <u>from their current location within the site</u>.</p><p>In some cases, the call to action might be something as simple as, &#8220;To learn more, please click here.&#8221; On another page, the call to action might be &#8220;Please proceed to our secure checkout to process your order.&#8221; Think of these as helpful directions to visitors as they navigate your site toward the MDA.</p><p>Also think of them as important sales tools. The call to action should be targeted directly to your ideal buyer. The language and the message should be unambiguous. For example, a mutual fund site might employ the dignified, business-like &#8220;To obtain a prospectus or to speak with one of our customer care representatives, please click here.&#8221;</p><p>The site selling skateboards would employ a different tone. &#8220;Order 3 jammin&#8217; wheels right now and we&#8217;ll give you the 4th roller FREE! We&#8217;ll even ship FREE so you keep more $$$ in your pocket. Now, that&#8217;s HOT!!!&#8221;</p><p>Design your call to action to suit the sensibilities of your target buyer.</p><p><b>Conclusions</b><br />There&#8217;s no doubt that search engine optimization is important (critical) to the success of an ecommerce site. However, search engines don&#8217;t make purchases. Your site designer can make the site readable to SEs to ensure that it&#8217;s optimized for search engines and properly indexed.</p><p>However, you or your designer should pay just as much attention to eyeball optimization (EBO). This includes everything from colors to text layout to graphics and pictures. These are the things that attract attention and keep visitors from clicking off.</p><p>Finally, create useful calls to action throughout your site. These visitor directions tell potential customers what&#8217;s coming up and what to expect. They also tell customers what to do next. Buy an item, complete a form, opt in for a newsletter or pick up the telephone &mdash; the MDA may vary, but a potent call to action is the best, no-cost way to improve conversion rates.</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2006/06/eye-ball-optimization-most-desired-action/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Search Engine Promotion</title><link>http://www.w3-edge.com/weblog/2006/05/search-engine-promotion/</link> <comments>http://www.w3-edge.com/weblog/2006/05/search-engine-promotion/#comments</comments> <pubDate>Mon, 15 May 2006 08:17:54 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[E-Commerce]]></category> <category><![CDATA[User Interface / Experience]]></category> <category><![CDATA[Web Analytics]]></category> <category><![CDATA[search marketing]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/search-engine-promotion/</guid> <description><![CDATA[Step 1 in getting noticed on-line is search engine promotion – creating a site that SEs can weigh accurately and index to your specifications. Here's how.]]></description> <content:encoded><![CDATA[<h3 class="first">&raquo; No Strategy. No Success.</h3><p>Whether you&#8217;re planning the launch of your first site, or wondering why your site counter is actually moving backward, stop. You need a strategy to promote your site to search engines and to visitors. A plan of action based on five key factors, all of which should be weighed carefully before you take another step. Here are the five, most important considerations in the development of any search engine promotion.</p><p><b>1. The Site&#8217;s Objectives</b><br />What are <u>your</u> expectations for the website? These will usually point you to the site&#8217;s objectives. In the case of commercial sites, the broad objective is straightforward &mdash; to sell enough goods and/or services to become profitable.</p><p>However, you might also want to educate, motivate, persuade and inform in addition to, or instead of, selling. A top-down analysis of your site&#8217;s objectives is the place to start the development of your action plan.</p><p>Once you&#8217;ve determined the site&#8217;s objectives, keep them front and center during the entire development of an SE promo strategy. It&#8217;s important that any search engine understand your site&#8217;s objectives on the very first spider visit.</p><p><b>2. Market Analytics</b><br />Essential. Who are you trying to reach &mdash; your sales demographic? What do the members of your demographic need? How do they make purchase decisions? Are they computer savvy? Critical to the design and implementation of a search engine promo strategy is to <u>know</u> <u>your</u> <u>market</u>.</p><p>And the best place to learn is from the competition. Pull a Google on the competition to see how the successful sites do it. Perfectly ethical and a measurable, absolute guide to what works and what doesn&#8217;t.</p><p>But you can&#8217;t stop there. Market metrics are also a part of a successful promo strategy. The development of multi-dimensional metrics will be useful in virtually every step of the design, development and SE optimization phases. There are plenty of metrics software packs on the market. Some are even free.</p><p>The problem with these number crunchers is simple: all they do is provide the raw data. Number of hits. Average number of pages viewed. Ratio of visitors to buyers. Just stats, not strategy.</p><p>Analytics gathered using a variety of apps and tools must be properly correlated and analyzed to develop an effective search engine promotion. It&#8217;s not enough to have the data. You must interpret the numbers in order to take actionable steps.</p><p><b>3. Techno-Factors</b><br />An over-achieving website doesn&#8217;t just happen. It must be crafted. It requires highly-specialized knowledge of everything from HTML, SEO and CSS to human nature and purchase motivators.</p><p>Search engines spider sites in a variety of ways. The simpler and clearer your site is to an SE spider, the greater the likelihood that your site will be assessed and ranked properly. Conversely, if the technical design of your site isn&#8217;t dead on for search engine spiders, a site may be mis-indexed or even banned from SEs altogether for what spiders perceive as black hat tactics, though it&#8217;s simply inept (and therefore costly) programming. You might as well hang out the &#8216;Going Out Of Business&#8217; sign.</p><p>Techno-factors come into play during the design phase, the development and testing phases and after the site&#8217;s launch when refinement, optimization, content updates and routine site maintenance are undertaken.</p><p>Any well-considered strategy must provide the means to design (or redesign) the site, develop it, promote it to the SEs and optimize it over time. Search engine promotion and site optimization aren&#8217;t goals. They&#8217;re part of the process.</p><p><b>4. Plan Your Presentation Layer</b><br />Once the technical aspects of the site have been incorporated into your promo strategy, turn your attention to the presentation layer. The presentation layer can make or break a site, regardless of how well-designed the technical structure supporting the site&#8217;s skin.</p><p>Navigation should be simple. Buttons and links clearly labeled. The user should always be able to go &#8216;Home&#8217; from any page. Check-out should be clear, uncluttered and instill buyer confidence. A site map is useful to visitors and SE spiders. Anything less will hurt the bottom line.</p><p>The site skin also presents the look, feel and tone of your on-line enterprise. Stately and dignified, WiLd &#038; KraZy, helpful and concerned &mdash; all determined by the look of the site. Color combinations, type font and size, type placement and the tone of the content make up your public persona.</p><p>And the skin is spidered right along with the back office so it should appeal to eyeballs <u>and</u> make spiders happy, as well. Header placement, number of headers above the fold, keyword density and other SE search parameters must be fine-tuned for successful search engine promotion.</p><p><b>5. Promotion and Optimization</b><br />Once you&#8217;ve gone live with your site, you&#8217;ve only just begun. The world of ecommerce is fast-paced and cutthroat. And if you don&#8217;t promote your site to search engines and to potential buyers your chances for success diminish accordingly.</p><p>Today, site success depends on promotion &mdash; search engine promotion and eyeball promotion. You can promote on a shoestring or you can launch a pedal-to-the-metal campaign with banner ads, Google Adwords, links building and opt-in cultivation. If you aren&#8217;t SEO-experienced, you&#8217;ll be best served by professionals who can track site activity, <u>develop</u> useful metrics and devise and implement a strategy for improved site performance.</p><p>The same goes for the process of optimization. Sites must be search engine optimized and conversion optimized &mdash; two very different things. Much of SEO takes place behind the scenes. That&#8217;s why it&#8217;s essential that you use SEO pros to actually build your site. This is not where you can cut a few corners.</p><p>Then there&#8217;s conversion optimization &mdash; converting visitors to buyers. Most of this takes place at the presentation level. Does the site meet or exceed the visitor&#8217;s expectations? You have 6.4 seconds to convince a visitor to explore your site. That&#8217;s how much time web users devote to site evaluation.</p><p><acronym title="Do it Yourself">DIY</acronym> or Go With The Pros?<br />94% of all ecommerce ventures tank. Down in flames. Many of these failures are based on poor business models, but just as many are due to poor site design, lack of SE recognition, an off-putting presentation layer or a home page that looks like a carnival midway.</p><p>If you&#8217;re a start-up and you don&#8217;t know much about SEO and SE promotion, do not let your teen-aged nephew design your site. And if you&#8217;re the owner of an underperforming site and you can&#8217;t figure out why, don&#8217;t waste your time tweaking. You&#8217;re losing sales every day.</p><p>If you know ecommerce, develop a strategy that encompasses all five of these critical facets. If you don&#8217;t know ecommerce, hire somebody to do it for you.</p><p>It&#8217;s the best money you&#8217;ll ever spend.</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2006/05/search-engine-promotion/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Site Design Aesthetics</title><link>http://www.w3-edge.com/weblog/2005/11/site-design-aesthetics/</link> <comments>http://www.w3-edge.com/weblog/2005/11/site-design-aesthetics/#comments</comments> <pubDate>Wed, 16 Nov 2005 02:58:48 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[User Interface / Experience]]></category> <category><![CDATA[conversion rate optimization]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/site-design-aesthetics/</guid> <description><![CDATA[If you don't think first impressions matter, consider that the average visitor to your site spends less than five seconds deciding whether to move on or not. Your look had better be right or they're not coming back.]]></description> <content:encoded><![CDATA[<h3 class="first">&raquo; Eye Appeal, Demographics and Market Expectations</h3><p>Though you&#8217;ve spent months of time and thousands of dollars to get your site up and running, a first-time visitor will give you less than five seconds to &#8216;Wow&#8217; them. No &#8216;wow&#8217;, no how. That visitor has moved on before you&#8217;ve even said, &#8220;Welcome&#8221;. The Internet is a cruel place, where the laws of evolution apply. You have to adapt, be adept and adopt a new attitude about your site&#8217;s aesthetics &mdash; the look and feel and the impression these design aspects have on visitors.</p><p><b>Look at Your Homepage</b><br />Is it engaging? Does it pique the visitor&#8217;s interest? Is it clear what you do or what you sell? Or, is it a mass of text with 14 links around the screen&#8217;s border? Does it look &#8216;hype-y&#8217;?  Does it bore even your best friends? Any doubts and you&#8217;re dead.</p><p>Even if you&#8217;re working on your own, with free web site templates, you still have to consider that first impression on the visitor. If the site looks low-rent, it won&#8217;t instill visitor confidence. In fact, most of them will click off before your dancing bear Flash animation fully downloads. (And you thought it was so cute.)</p><p>You may have the best product on the planet and prices that &#8220;just can&#8217;t be beat,&#8221; but if your site&#8217;s aesthetics don&#8217;t sync up with your target demographic and market expectations, don&#8217;t quit your day job just yet.</p><p><b>Site Design and Eye Appeal</b><br />In real estate, it&#8217;s called &#8216;curb appeal&#8217;. Does the home make a good first impression before the buyers have even left the curb? If so, you&#8217;re well on your way to making a sale. Same is true of your site&#8217;s home page. Start there, worry about interior pages once the home page &#8216;motif&#8217; has been determined. Eye appeal is everything, but what&#8217;s appealing to one pair of eyes is singularly unattractive to another.</p><p>Consider the elements of visual design. Are the colors appropriate for your target demographic? If you&#8217;re selling quilting supplies, pinks and lavenders are perfectly appropriate. However, if you&#8217;re selling rollerblades, you might stay away from the pastels and go with a spray-paint type font and dramatic, glowing colors. Put yourself in the place of the ideal visitor (the one with something to buy) and ask yourself if the colors work for <i>that</i> individual.</p><p>Scale matters. If you&#8217;ve got tiny button links off the home page, the casual visitor might not even see them, tucked away in that corner. Consider the balance and proportion of the elements on your home page. Is that gigantic banner attractive? Is the fireworks motif right for your goods or services? What effect do the design elements have on the visitor? (Special note: Don&#8217;t ask your spouse, your kids, siblings, parents or friends for their opinions. In this case, they&#8217;re biased and you need the raw, unvarnished truth about the impact your home page has when first viewed. Ask strangers. Better yet, ask your site designers. They&#8217;ve done it before.)</p><p><b>Site Demographics</b><br />If you haven&#8217;t considered a demographic analysis to this point, now&#8217;s the time to get started. Product selection, tone of screen text, motifs, marketing strategies, links &mdash; virtually everything about an on-line business must be targeted with laser precision on a known demographic. It&#8217;s not likely you&#8217;d open an on-line store for aquarium enthusiasts unless you were one &mdash; or at least you knew the difference between a guppy and a goldfish.</p><p>Make a list of words that describe your target market. What are their concerns? Their needs? Their emotions regarding your products?</p><p>Do some market research. Visit other sites &mdash; successful sites &mdash; to see how they&#8217;re doing it so well. It&#8217;s unethical to rip off an existing site, no doubt, but you can&#8217;t copyright an idea and ideas, the right ideas, are what you&#8217;re after.</p><p>You can also track down a ton of demographic information on the Internet. You can learn how much TV teen-aged boys (ages 16-18) watch daily, or how much seniors spend on travel to different world destinations. This information has been collected, collated, sliced and diced for your convenience. Looking to reach men ages 38-50, dog owners, duck hunters, van drivers and lawyers &mdash; someone&#8217;s done a study.</p><p><b>Market Expectations</b><br />Often overlooked by unseasoned site designers, market expectations are an essential element in the on-line success equation. Want an example?</p><p>If you&#8217;re a regular web user, you&#8217;ve seen these sites before: they sell one product, usually an e-book download, they employ sorry-looking clip art and bombard you with page after page after page of the most unbelievable sales hype since P.T. &#8220;There&#8217;s a sucker born every minute&#8221; Barnum. If you&#8217;re like most of us, you run screaming for the nearest exit when you see these get rich, lose weight, buy now web sites, right? You can spot them a mile away. But what&#8217;s important is &mdash; <i>they work for that product.</i></p><p>Now, would that approach work for a non-profit, children&#8217;s organization? Not very likely. Why? Market expectations. You (the market) don&#8217;t expect to see e-book hype text on a site dedicated to improving children&#8217;s health &mdash; and vice-versa.</p><p>So what does your target demographic expect when they shop on line? A certain attitude? Certainly the &#8216;right&#8217; look and feel. Warm and fuzzy? Razor&#8217;s edge? Comforting and welcoming? All of these come into play, along with one other key ingredient: quality &mdash; an intangible design element, but something we all look for. Let&#8217;s face it, discriminating buyers don&#8217;t spend a lot of time on cheesy-looking web sites.</p><p>If you&#8217;re wondering why your on-line emporium isn&#8217;t doing so well, why your conversion rate is less than zero or why everybody&#8217;s making money except you, do a top-down analysis of your site&#8217;s aesthetics. If you don&#8217;t know much about graphic design elements, outsource the artwork to professionals. It&#8217;s low-cost and very cost-effective when sales volume increases.</p><p>If you aren&#8217;t a writer, outsource the writing to capture the right tone, the appropriate slant and the most cogent organization of content. You may be working on a shoestring budget, but this is one area of e-commerce where it pays to get professional help if you don&#8217;t know much about effective written communication and visual appeal.</p><p>You may know sales. You may be able to sell anything to anyone, anytime &mdash; face to face. Your web site is different. Without that eye appeal, no one is going to stick around to hear your spiel. You have 5 seconds. Go!</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2005/11/site-design-aesthetics/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Converting Visitors to Buyers</title><link>http://www.w3-edge.com/weblog/2005/07/converting-visitors-to-buyers/</link> <comments>http://www.w3-edge.com/weblog/2005/07/converting-visitors-to-buyers/#comments</comments> <pubDate>Sat, 16 Jul 2005 02:07:59 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[User Interface / Experience]]></category> <category><![CDATA[conversion rate optimization]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/converting-visitors-to-buyers/</guid> <description><![CDATA[The science of marketing in brick-and-mortar retail stores has been developed for decades. Many of the same principles that tempt you to buy paper towel A over paper towel B can be applied to the design of your site, converting more visitors to buyers. Here's how.]]></description> <content:encoded><![CDATA[<h3 class="first">&raquo; Applying Basic Marketing Techniques to Site Design</h3><p>When you walk through the local mega-mall, what attracts you to one store over another? Is it strictly your needs at the moment, or is there more to it? Are you more likely to enter a store that&#8217;s light, airy and inviting, or one that&#8217;s kind of dark with narrow aisles and cluttered shelves? Eye appeal counts and there&#8217;s science to back that up.</p><p>For decades, marketing specialists have studied the buying habits of people shopping in brick-and-mortar establishments using everything from focus groups to 20- cent-off coupons on Nut Fudgies to see what works &mdash; and based on the accumulated data, these sell pros know what works. For example, you know those displays at the end of the supermarket aisles? They&#8217;re called end caps and they&#8217;re considered prime real estate on the shopping floor. In fact, manufacturers pay stores, or provide other incentives, just to get their ketchup displayed in an end cap the week before the 4rth of July. The store sells more, the manufacturer sells more and you&#8217;ve got 12 jars of ketchup in the cupboard. See, it work?</p><p>Marketing experts also know that products at eye level sell more than products on the bottom shelves and, again, eye-level shelf space comes at a premium. The next time you&#8217;re in the supermarket, notice where the Coke is shelved. It&#8217;s at eye level and the Coca-Cola Company knows it and offers stores a better wholesale price to get that shelf space.</p><p>Everything from the lighting (soft and natural, even if florescent) to the music playing in the background (tunes that wouldn&#8217;t offend my aged grandmother) are all intended to entice you to buy at the supermarket, jewelry store or any place else that takes plastic (or cash, for that matter).</p><p>Well, check this out: these same, time tested principles can be applied to e-commerce sites, and when they are, you create an on-line environment that not only delivers the products visitors are looking for, but provides a pleasant experience as well. And, guess what? When that happens, the visitor-to-buyer conversion rate increases &mdash; and you start showing more profit in less time. So, what can you do to make your site more tempting, more attractive and more user-friendly?</p><p>Let&#8217;s start with the basics. Know your buyer. If your target demographic is senior citizens, the dripping red pentangle against a black background is probably not your best choice of color motifs. Perhaps something in the pastel area, soft colors. On the other hand, if you&#8217;re targeting the 18 &mdash; 35 male buyer, hey, go with the pentangle. It&#8217;ll be something most of your expected foot traffic will recognize, and it definitely makes a statement. Colors count. Younger buyers want them bright, day-glo and totally wicked. The over 30 crowd wants something a bit more…mature.</p><p>Text should be easily readable by anyone. This involves three considerations: font style, font size and text/background colors. Choose an easy to read font &mdash; Arial or Times New Roman fit the bill. Looking for something with a bit more zip, try Verdana. It&#8217;s easy on the eyes and readable by people with vision issues.</p><p>Consider font size. Banners should be at least 16-point, 20-point if it&#8217;ll fit. And, use this as a general rule of thumb &mdash; any font size less than 12-point is strictly off limits &mdash; except for the fine print, legal, mumbo-jumbo which can be in 6-point to save valuable screen space. Who cares, as long as your site is street legal?</p><p>Finally, the combination of font color and background color is critical. Recently, we&#8217;ve seen a lot of light greens, pinks and other great colors but placed against a blizzard white background, causing the type to virtually disappear. You kind of have to guess where each link is taking you. Very frustrating.</p><p>Keep your home page simple and inviting. A cluttered home page or landing page can quickly lead to sensory overload and send any buyer screaming for the virtual doorway a mouse click away. Use large, well-labeled links buttons for ease of use. That&#8217;s what people want &mdash; ease of use. Forget your &#8216;artistic vision&#8217;, and forget everything you learned in graphic design for print. Keep it simple, understated, well labeled and well organized and visitors will be more inclined to stick around, browse and, ultimately, buy.</p><p>A site map is a useful tool, especially if you&#8217;ve got multiple links off the home page, followed by assorted drill-down screens before the user finds the product s/he&#8217;s looking for. A site map is easy to build &mdash; basically a plot of the site, with direct links to specific features.</p><p>A secure checkout is a must, even if you have to go the PayPal route. I-buyers are a savvy bunch so, no encryption, no sale. Your site should make it easy to shop with a checkable shopping cart that can be changed with a click, fast secure checkout, an invoice in the e-mail box (with conformation number, please) and you&#8217;re building a base of buyers who will be back because you had the goods and you made it easy, convenient and fun.</p><p>Give &#8216;em something free. Check out sites selling e-books and other niche information. You&#8217;ll often find a FREE 10-page report on &#8220;EVERYTHING YOU NEED TO KNOW BEFORE BUYING A TURTLE FOR A PET&#8221;. Naturally, the teaser provides just enough information to let the buyer know she now needs the $19.95 download on the ABC&#8217;s of Turtle Care. This also provides potential buyers with the opportunity to &#8216;opt-in&#8217;. The 10-page teaser requires the buyer to enter an e-mail address, thus opting in for additional e-mail from you in the weeks and months to come. That&#8217;s what the auto-responder business is all about &mdash; keeping your site&#8217;s name before the buyer.</p><p>With an opt-in, you can deliver a monthly newsletter, the tip of the week or even the daily horoscope, thus providing useful (or at least entertaining) information to keep your visitors&#8217; awareness of your site high, and their feelings about you good. After all, you&#8217;re giving them something for free in the hope that they&#8217;ll be back to buy. Good will goes a long way, even in the cold, transistorized world of e-commerce.</p><p>Eye-catching, convenient, uncluttered, easy-to navigate, easy-to-read and something for free &mdash; it&#8217;s like a trip to the old local, corner market where Mr. Mishkin would give you a free Fireball when you came in with your mother.</p><p>There aren&#8217;t any tricks or secrets to increasing your conversion rate. Ask yourself what you expect from any store you visit. Then, translate your wishes to site features to accommodate even the fussiest buyer. After all, even in cyberspace &mdash; the customer is always right.</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2005/07/converting-visitors-to-buyers/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk
Database Caching 1/9 queries in 0.008 seconds using apc
Object Caching 932/949 objects using apc
Content Delivery Network via cdn.w3-edge.com

Served from: www.w3-edge.com @ 2010-09-02 15:01:43 -->