<?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>Clickbrand Blog &#187; ray</title>
	<atom:link href="http://www.clickbrand.com/blog/author/ray/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.clickbrand.com/blog</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Mon, 23 Aug 2010 16:35:01 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Increase user participation by Increasing your trustworthiness</title>
		<link>http://www.clickbrand.com/blog/web-design/increase-user-participation-by-increasing-your-trustworthiness/</link>
		<comments>http://www.clickbrand.com/blog/web-design/increase-user-participation-by-increasing-your-trustworthiness/#comments</comments>
		<pubDate>Wed, 28 Oct 2009 21:30:54 +0000</pubDate>
		<dc:creator>ray</dc:creator>
				<category><![CDATA[Website Design]]></category>

		<guid isPermaLink="false">http://clickbrand.com/blog/?p=37</guid>
		<description><![CDATA[So you&#8217;ve done all the proper SEO stuff for your site, you&#8217;ve told everyone you know about it, and you&#8217;ve designed your site to look as professional as possible. Now that you have your website up and running, users should start flocking to your website, filling out forms, becoming a member of your community, or [...]]]></description>
			<content:encoded><![CDATA[<p>So you&#8217;ve done all the proper SEO stuff for your site, you&#8217;ve told everyone you know about it, and you&#8217;ve designed your site to look as professional as possible. Now that you have your website up and running, users should start flocking to your website, filling out forms, becoming a member of your community, or just generally clicking around and accomplishing the goal you had intended. In a perfect world, your website would be bustling with activity, but unfortunately, not everyone&#8217;s website always goes as planned. If you find that your user participation has been less than you expected, it may be an issue of trust, among other things.</p>
<p>Experience has taught many internet users to be skeptical of everything on the web. We&#8217;ve all been burned at some point by an untrustworthy website, so you have to prove to each and every user that you are worthy of their trust. You have to prove that the form users must fill out will not increase the spam in their inbox, or that the button you wish them to press will not bring them to an advertising site with endless popups and popunders. Proving your trustworthiness is no small feat, but here are a few tips that may help you.</p>
<p><span id="more-37"></span></p>
<p><strong>Create a Clean, Professional Design and User Interface</strong></p>
<p>Nothing says &#8220;I&#8217;m a serious and trustworthy business&#8221; more than a clean, professionally designed website and user interface. If your website looks like it was slapped together on powerpoint, or hacked together by an amateur, the user will never take your website seriously. OR, if your website is frustratingly difficult to navigate through, your user will just give up and leave. Spending the time, effort, and (possibly) money to create a compelling professional design and intuitive user interface will pay off immensely when the site is launched.</p>
<p><strong>Check for typos</strong></p>
<p>Typos on your website are red flags for the user. If you aren&#8217;t professional enough to check the spelling in your content, you aren&#8217;t professional enough to be trusted with user information or participation.</p>
<p><strong>Display major awards or certifications and provide links to the organization that awarded them</strong></p>
<p>If you were selling your property and had to choose between a realtor A, who has no awards, versus realtor B, who has many awards for selling a record number of properties, which would you choose? (assuming that all other points are equal) Unless there was something absolutely special about the no-awards realtor, I would choose the realtor with awards under his belt. With realtor B, I would at least know that he has the experience to get the job done, and would therefore trust him to sell my property more than realtor A.</p>
<p>Just like realtor B, your website should proudly show your awards. Don&#8217;t overload the user with every single award that you may have received, but do show the major awards.</p>
<p style="text-align: center"><a href="http://bkktlaw.com" target="_blank"><img class="aligncenter size-full wp-image-76" src="http://clickbrand.com/blog/wp-content/uploads/2009/10/bkktlaw-awards.jpg" alt="bkktlaw-awards" width="245" height="236" /></a></p>
<p style="text-align: center"><em><a href="http://bkktlaw.com" target="_blank">BKKTLaw</a> highlights their achievements by incorporating an icon of being named one of the &#8220;Top Firms of 2009&#8243; by IP Today Magazine.</em></p>
<p style="text-align: center"><em><br />
</em></p>
<p style="text-align: center"><a href="http://www.kennythefloorguy.com" target="_blank"><img class="aligncenter size-medium wp-image-78" src="http://clickbrand.com/blog/wp-content/uploads/2009/10/kenny-awards-300x169.jpg" alt="kenny-awards" width="300" height="169" /></a></p>
<p style="text-align: center"><em><a href="http://www.kennythefloorguy.com" target="_blank">KennyTheFloorGuy</a> also establishes credibility by mentioning his Five-Star contractor rating</em></p>
<p style="text-align: center"><em><br />
</em></p>
<p><strong>Tell the user what will happen if they take an action</strong></p>
<p>You want the user to press a button, or to fill out a form. BUT, as I stated earlier, most users have learned to be skeptical of links, buttons, and forms. So, to get users to trust your site, make it more transparent. If you want a user to click a button, tell them what will happen if they do click a button. Will they by taken to a form? Will they find themselves in limbo? If you want the user to fill out a form, tell them why and what will happen if they do. By making the actions on your site more transparent, you become more trustworthy.</p>
<p><a href="http://www.childhelpoc.com/" target="_blank"><img class="aligncenter size-full wp-image-84" src="http://clickbrand.com/blog/wp-content/uploads/2009/10/childhelp-button11.jpg" alt="childhelp-button1" width="454" height="326" /></a></p>
<p style="text-align: center"><em><a href="http://www.childhelpoc.com/" target="_blank">Childhelp OC</a> &#8211; This website does a good job of telling the user what will happen if they take action. On the left, the button clearly states &#8220;Click Here for Golf Reservations,&#8221; which leads the user to a reservation form page. On the right, there is text to let the user know that they will be navigating to a new site if they click on a Sponsor Logo.</em></p>
<p style="text-align: center"><em><br />
</em></p>
<p><strong>Display security certificates for forms</strong></p>
<p>If your site has a checkout, or a form that users must fill with sensitive information and submit, displaying any security certificates would assure the user that their information is safe, which makes the user more likely to complete the form or checkout.</p>
<p style="text-align: center"><img class="aligncenter size-full wp-image-99" src="http://clickbrand.com/blog/wp-content/uploads/2009/10/EAC-securitycertificates.jpg" alt="EAC-securitycertificates" width="319" height="249" /><em>VeriSign and TRUSTe are some examples of trusted security certificates</em></p>
<p style="text-align: center"><em><br />
</em></p>
<p><strong>Add Disclaimers or notes to reassure the user</strong></p>
<p>Along with security certificates, make sure to display any disclaimers or notes to the user. For example, a popular disclaimer is one that tells the user their information is safe. These are often found on contact forms and basically lets the user know that their information will only be used to contact them and not sold to 3rd parties.</p>
<p style="text-align: center"><a href="http://www.manlystewart.com" target="_blank"><img class="aligncenter size-full wp-image-87" src="http://clickbrand.com/blog/wp-content/uploads/2009/10/manlystewart-warning.jpg" alt="manlystewart-warning" width="381" height="204" /></a></p>
<p style="text-align: center"><em><a href="http://www.manlystewart.com" target="_blank">Manly &amp; Stewart</a>- This disclaimer is added to the bottom of their Contact Us form to ensure users of their valued privacy rights.</em></p>
<p style="text-align: center"><em><br />
</em></p>
<p><strong>Only gather the information you absolutely need</strong></p>
<p>To further encourage form completion, only ask for the minimal amount of information you need. Aside from saving the user time, it also emphasizes the idea that you will not sell their information (because you don&#8217;t have much to sell). In terms of form fields, less is more!</p>
<p style="text-align: center"><a href="http://www.seniority1.com" target="_blank"><img class="aligncenter size-full wp-image-97" src="http://clickbrand.com/blog/wp-content/uploads/2009/10/Seniority1-form.png" alt="Seniority1-form" width="232" height="518" /></a><em><a href="http://www.seniority1.com" target="_blank">Seniority1</a>- To get a Free Report, the form only asks for a First name and Email address. </em></p>
<p style="text-align: center"><em><br />
</em></p>
<p><strong>After the user completes an action, tell them what will happen next</strong></p>
<p>If the user trusts you enough to take an action, or fill out a form, follow through with that good faith and let them know what will happen now. Will they be getting an email? How long will it take? What should they do in the mean time? Don&#8217;t leave the user hanging, wondering what happened. Tell them clearly what you will do and what they should do.</p>
<p style="text-align: center"><img class="aligncenter size-full wp-image-92" src="http://clickbrand.com/blog/wp-content/uploads/2009/10/projectartisan-confirmation.jpg" alt="projectartisan-confirmation" width="444" height="159" /></p>
<p style="text-align: center"><em>Project Artisan &#8211; A confirmation message appears and specifically lets the customer know that they will be receiving a confirmation email within the next 24-hours. They also provide an option for the user to either Register for a new account (if they haven&#8217;t done so already) or Continue Shopping.</em></p>
<p style="text-align: center"><em><br />
</em></p>
<p><strong>Thoroughly test your site for any bugs</strong></p>
<p>Bugs every once in a while is understandable and forgivable to an extent. If your site is just full of bugs, it makes it unuseable. Furthermore, it makes your website untrustworthy. Especially if an error occurs in a crucial area, such as a checkout or form submission. At that point, if you are not a well established site, such as amazon or yahoo, that user will more than likely give up and never return. So before you launch, make sure that you&#8217;ve tested everything on your site.</p>
<p style="text-align: center"><a href="http://www.altmeds.com" target="_blank"><img class="aligncenter size-full wp-image-89" src="http://clickbrand.com/blog/wp-content/uploads/2009/10/altmeds-splashpage.jpg" alt="altmeds-splashpage" width="447" height="246" /></a></p>
<p style="text-align: center"><em><a href="http://www.altmeds.com" target="_blank">Altmeds.com</a> &#8211; The splash page notifies the user that the site is a Beta Release. This increases user awareness that the site is monitoring for improvement and minor bugs may be present.</em></p>
<p>This isn&#8217;t an all encompassing list, but it lists enough of the basics to get you started. If you aren&#8217;t already meeting your website goals, hopefully these tips will help you accomplish them.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.clickbrand.com/blog/web-design/increase-user-participation-by-increasing-your-trustworthiness/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tips for Designing Mobile Applications</title>
		<link>http://www.clickbrand.com/blog/web-design/tips-for-designing-mobile-applications/</link>
		<comments>http://www.clickbrand.com/blog/web-design/tips-for-designing-mobile-applications/#comments</comments>
		<pubDate>Mon, 05 Oct 2009 18:32:47 +0000</pubDate>
		<dc:creator>ray</dc:creator>
				<category><![CDATA[Website Design]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[mobile design]]></category>

		<guid isPermaLink="false">http://clickbrand.com/blog/?p=22</guid>
		<description><![CDATA[Designing for mobile applications is quite different from designing for conventional computers, such as laptops or desktops. If you were to port a website, for example, to a mobile device, it would mean more than simply making a miniature version of it. Think of mobile applications more like a child of a main application, rather [...]]]></description>
			<content:encoded><![CDATA[<p>Designing for mobile applications is quite different from designing for conventional computers, such as laptops or desktops. If you were to port a website, for example, to a mobile device, it would mean more than simply making a miniature version of it. Think of mobile applications more like a child of a main application, rather than a miniature version. The mobile application shares many of the attributes of its parent application, but like any real child, it is not miniature copy of its parent. Here are a few things to consider when designing a mobile application:<span id="more-22"></span></p>
<p><strong>Smaller screen sizes</strong></p>
<p>Just like desktops or laptops, mobile devices have a variety of screen sizes. They can range anywhere from 128px by 160px to 320px by 480px. How do you decide which size to design to? It really depends on a couple of factors, namely your target audience and the purpose of the mobile application. You can also look at current trends. For example, before the arrival of the iphone, the average Mobile devices screen dimensions were relatively small. The popularity of the iphone has increased the average screen dimension to 320px by 480px.</p>
<p>If you are unsure about what screensize your audience is using, OR you are trying to design something more universal, then use fluid layouts that can stretch and compress as necessary.</p>
<p><strong>Deep, not wide</strong></p>
<p>The limited screen real estate effects the visual layout of your mobile application, consequently, this also effects how you structure the User Interface. On a desktop/laptop application, you would normally structure the user interface in a wide format. Meaning, you would layout all the options and navigation items in fairly specific groupings easily visible to the user. The goal is to have the user reach their destination in as few clicks as possible For example, the sitemap below illustrates a wide structure.</p>
<div id="attachment_29" class="wp-caption alignnone" style="width: 310px"><img class="size-medium wp-image-29" src="http://clickbrand.com/blog/wp-content/uploads/2009/10/wide-300x225.jpg" alt="This is an example of a wide structure. As you can see, all the navigation points are easily accessible from the main page. " width="300" height="225" /><p class="wp-caption-text">This is an example of a wide structure. As you can see, all the navigation points are easily accessible from the main page. </p></div>
<p>For mobile devices, the small screen size makes such structures difficult to use. To see all of these options and navigation items on a single mobile devices screen would require tiresome scrolling, panning, and movement. Your user would quickly become frustrated with the huge amounts of options. Preventing user frustration and making your mobile application more friendly requires a deep user interface structure. A deep structure basically groups your options and navigation points in more general categories. If your navigation is more general, the user is presented with fewer choices, thus making it easier to navigate your application. This unfortunately increases the number of “clicks” your user must perform to reach their intended destination, But, it makes your mobile applications navigable. The goal is to make the navigation choices simple and easy for the user. It is possible to make your mobile application too deep with too much functionality, which brings me to my next tip, core functionality.</p>
<div id="attachment_30" class="wp-caption alignnone" style="width: 310px"><img class="size-medium wp-image-30" src="http://clickbrand.com/blog/wp-content/uploads/2009/10/deep-300x225.jpg" alt="This is a deep structure. The biggest difference between this and the wide structure is the generalization of navigation items. Here, the navigation item is broken into two general categories. From there, the user must dive deeper to get the information they need. " width="300" height="225" /><p class="wp-caption-text">This is a deep structure. The biggest difference between this and the wide structure is the generalization of navigation items. Here, the navigation item is broken into two general categories. From there, the user must dive deeper to get the information they need. </p></div>
<p><strong>Core Functionality</strong></p>
<p>Having too much functionality in your mobile application can lead to a structure that is too deep. Incredibly deep Mobile application structures can be very confusing for the user. By focusing your efforts to only the essential functions of the application, you can prevent application structures that are too deep.</p>
<p>Furthermore, you must consider how exactly users use mobile devices and applications. They are called mobile devices because users are on the move while using it. Users interface with the device for short periods of time then continue along their business. Anything that requires more time than the user has would not be used. By focusing your application to include only its core functionality, you help minimize the time the user needs to spend using your mobile application, thus, increasing the value of the application to the user.</p>
<p><strong>User Interface for human proportions</strong></p>
<p>How the user interacts with the mobile application can make or break your application. If the User Interface (UI) is confusing, few will use it. If it is difficult to use, users will abandon it for other mobile applications with simplier interfaces. The rise in popularity of touch interaction has added another aspect to consider when designing the interface: human proportions .</p>
<p>Consider the size of your user’s interaction tool, their finger. It takes up a certain surface area and cannot be smaller or larger than what is already there. So, your interactive elements, such as buttons or navigation items have to be big enough for a finger to press. A good minimum size is 40px by 40px. Furthermore, the elements must have enough separation from other elements for the user’s finger to cleanly hit their intended destination.</p>
<p><strong>Pre-defined design conventions</strong></p>
<p>Finally, consider using the pre-determined design conventions for the particular mobile device you are designing your mobile application for. Using these standard conventions helps your audience easily use your application. For example, an “x” at the top right corner of an application window is understood to be the close or exit button. Designing a different close button that uses a different symbol in a different location would cause great confusion and frustration for the user. They already understand these conventions, so designing something otherwise would require them to learn a new set of conventions, adding an unnecessary level of frustration.</p>
<p>By keeping these points in mind as you design your mobile application, you can increase the likelihood of its success. There are many other minor points to consider, but these should get you through the bulk of your design.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.clickbrand.com/blog/web-design/tips-for-designing-mobile-applications/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
