What I’m learning may shock some of you, and it may confirm ideas for others. It’s not far from what I’ve blogged about in the past: Supplemental navigation is, in most cases, visual junk.

Breakdown of link clicks by area

Interpreting the chart data

As you can see, supplemental navigation—including related posts, historical post navigation, popular posts, most commented posts, sidebars, etc—has accounted for about only 10% of the navigation on my site during several design variations. Of that 10%, historical navigation and related posts alone accounted for about 99%. The rest? Fluff. Garbage.

On the other hand, navigation inside the content area accounted for approximately 70% of clicked links on my site. Header navigation, including menu, logo, search, accounted for 30%.

Design implications of data

In short: less is more.

If you visit almost any blog today, you’ll be bombarded with 5,000 sidebar widgets, gadgets, and gizmos that are there to do what? Lower the bounce rate by increasing page views? Is that an actionable metric? No.

Blogs should be especially ashamed of these design practices, because the user’s goal is clear in 99% of the time: Read an article.

And the conversions are clear: subscribe, comment, share.

Those conversions are getting lost in too much choice and information overload. Do you want your users to subscribe, or do you want them to get lost in a sea of sidebar gadgets?

If the Paradox of Choice has taught us anything, it’s that how many choices you provide to users is a serious issue you should confront with every design decision.

Actionable design recommendations

1. Start tracking exactly how your users are navigating your site. If you don’t know how, here’s a good place to start.
2. Apps like Readability and WriteRoom exist for a reason: Distractions suck. Eliminate low performing navigation options to increase the performance of effective navigation and user goal completion rates.
3. Integrate important navigation into your content. Don’t leave it off to the side where it’s unnatural for people to look.
4. Focus on what you want your design to achieve. Don’t focus on inflating your stats and ego with page views or lower bounce rates.

Conclusion

Using information to make design decisions is something that should be practiced more in the web design community. In this case, a little data has provided a significant argument against a common blog design practice. What else could we be doing wrong or could we improve?

I think we’ll also find what works better for our users, also works better for our conversion rates. Please share your thoughts or data on the subject.

Related posts:

1. Rethinking website navigation design
2. Blog design best practice: Scrollbars not sidebars
3. My secret to finding the best long-tail SEO keywords with web analytics

“Code, code, code, blah, blah, blah.”

Two people, one a web analytics professional, the other a web developer, awkwardly sip coffee across from each other at a small cafe table that feels like a vast expanse. Their professional focuses seem not to hit any harmonious tones.

Then it happens. The internet marketer asks the question: “Do you know what an API is by any chance?”

“Yea, sure. Why?”

“I was reading about new stuff in Google Analytics, things like being able to track things other than page views, like when a user plays a video. Apparently you can also build user segments in real-time. But it said something about an API, and I gave up. Maybe I’ll look at it later when I have the time.”

“Well, I know how to use APIs, maybe I could help!” Relieved, the web developer realizes they do have something in common.

Over the next few hours they pour over the tracking API documentation together and realize the potential of their combined skill sets as they discuss advanced campaign tracking, event tracking, and real-time visitor segmenting.

A month later the company knows more about its online customers and their behaviors/preferences than they could have imagined. A year later they are numero uno in their industry.

This is a classic problem between engineering and marketing. They can do so much together if they could just focus on outcomes instead of differences.

Promote interdisciplinary dialogue in your company. Get people to open up and share what they know across disciplinary lines.

Get your customer service reps talking to your copywriters. Get your social media marketers talking to your web analytics folks. Hell, get your direct mail marketers talking to your web developers. Truly innovate.

Related posts:

1. Diving deep into user behavior with Google Analytics, Event Tracking, and jQuery
2. Is your Google Analytics missing page views? Introducing Asynchronous Tracking

Start at the beginning

In the beginning there was the first iteration of Nearby Tweets, a simple way to connect with local people and businesses on Twitter.

But in product development there is no such thing as perfection, only iterative design—and customers hold all the answers to a better product. So I reached out to my users as soon as I had a chance with Uservoice. Through Uservoice, my users could vote on features they wanted see in the Nearby Tweets redesign, and vote they did.

Top user requested changes to Nearby Tweets

1. Default location
2. Saved keywords and locations
3. Pullout drawer was annoying
4. Manual directory
5. Mobile version
6. Auto-refresh tweets
7. Block users
8. Block locations
9. Follow feature

Choosing which features to implement

While all user requests are valid opportunities, I had to give some thought to my own resources and agenda before to make the right decisions about which requests to accept.

Sorry mobile version, but you’ll have to wait

Since I already had a web presence and I have not completely aligned Nearby Tweets’ web presence with my goals, I am holding off on the mobile version, because that requires many resources and a new round of considerations, which would set me back and throw me off.

Sorry manual directory, but you’re for someone else

There are plenty of apps out there doing manual Twitter directories. I don’t have the reputation to compete them in that space, but the auto geolocation space is still mine, and that’s where I’ll stay for now. (See Twellow, WeFollow, and just tweet it)

The rest of you, come with me

The rest of the user-requested features fit within my current agenda for the web platform, which I’d have to also define more clearly before I started in on the UI design.

Narrowing my design scope

In order to keep myself on track, I laid out three design scope requirements for the Nearby Tweets redesign:

1. Address user concerns. I released the first version of Nearby Tweets quickly with little user feedback, just to quietly hit the market with a fun, useful project. With this redesign I wanted to garner as much user feedback during the design process as possible. I did so through Twitter, Uservoice, as well as a private and public beta.
2. Make Nearby Tweets more powerful. Although the focus of the first version was an advantage, it was very basic with no extended functionality. This time Nearby Tweets would supplement its core functionality with user preferences, and advanced search features.
3. Maintain Nearby Tweets’ simplicity and focus. All the while I would retain the simplicity of Nearby Tweets and make any effort to further simplify the Nearby Tweets experience.

Then I came up with my design goal

Allow users to watch nearby tweets without any work, but allow users to tweak Nearby Tweets when ready.

Turning concepts into UI design

To keep Nearby Tweets simple while adding advanced functionality I decided to utilize two UI design concepts: Progressive disclosure and lazy registration.

Implementing progressive disclosure in the UI

Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone. – Jakob Nielsen

It should be noted that a second screen could be interpreted as hidden functionality that displays on the same screen on demand. That’s one of the ways I interpreted it anyway, as you’ll see.

Tweet options

The primary focus of each tweet is what’s said and who said it, so I kept each tweet to just that.

However, users have specifically requested the option to follow people, block people, and block locations. This advanced functionality needs to be available without cluttering each tweet with options used by a minority of the users. In comes progressive disclosure. As a user moves their mouse over each tweet, options to follow people, block people, and block locations becomes available.

Location and keyword change popups

The primary focus of an initial visit to Nearby Tweets was to simply watch the Nearby Tweets stream. So the only heading on the home page reads: “Tweets nearby xxxxx about yyyyy.” Simple enough.

But what about when people decide to search a new location or keyword? You’ll notice that the location and keyword look like links. When the user moves to click the location or keyword to change it, an in-place popup reveals the potential for more functionality.

To present the user with a search box and everything else for searching would be too much for people just casually moving their mouse across the screen, so without clicking the user simply sees a button to “Change.” Clicking on that button further reveals full search capability. The whole box is actually clickable to increase the user’s click area.

One thing you’ll notice on the location popup is a “use the map” button. The map is another area of the UI that has two purposes: Give the user a sense of location and provide advanced search functionality through progressive disclosure.

Location searches using an interactive map

At first glance the map just sits behind the Nearby Tweets stream and provides the user a visual context for their location, with a translucent white circle indicating the search radius.

When users search locations, the Nearby Tweets stream slides away and reveals the map as search controls fade in.

This UI allows the map to take the backseat as a simple, relevant visual background to the Nearby Tweets steam while it’s not in use, but provide a very powerful search interface on demand.

User preferences

As a classic example of progressive disclosure, users can add saved locations, keywords, and more in the user preferences, which provides the user with the power to make Nearby Tweets work better for them.

Speaking of user preferences, let’s talk about how it works.

Implementing lazy registration in the UI

A user could never touch the user preferences screen, but still get nearly all of its advantages. How? Lazy registration is a growing UI trend wherein information about the user is stored to make a later registration simpler to complete by auto-completing known information.

Passive preferences

Although Nearby Tweets has no registration per say, it does have a preferences page that allows a user registration-like advantages. The “lazy” part includes all the preferences the user sets without explicitly setting preferences there.

• Locations are automatically saved each time the user switches locations
• Keywords are automatically saved each time the user searches a location
• The main UI allows users to block people and locations

Default location

Although the user can manually set a default location for Nearby Tweets in user preferences, this isn’t always necessary. Nearby Tweets attempts to find the user’s location automatically, making the UI completely passive unless the user chooses to further customize Nearby Tweets.

Addressing user requests

Default location

Nearby Tweets doesn’t always find the user’s location, so users wanted to manually override the UI with whatever default location they chose. I thought about several ways to achieve this, such as adding a “set to default” checkmark beside each saved location, but I thought this would add a lot of links for a misunderstood function without being too verbose.

I settled on keeping the option to set a default in the user preferences. There I would have the space to make it clear how to set a default location. Each saved location can be set as the default location simply by checking the column marked “default.”

Saved keywords and locations

I chose to use “recent” instead of “saved” because it more closely reflects the storing behavior of the “saved” locations and keywords. Keywords and locations are permanently saved like bookmarks, but rather they work like a browser’s history.

Auto-refreshing tweets

The refresh rate of new tweets was something I had a difficult time with. I had to fight between several competing factors: If I make it too slow people will think that Nearby Tweets isn’t working; If I make it too fast people won’t be able to read the tweets, thus eliminating usefulness. After tweaking the auto-refresh rate and testing it with a few users, I found the balance to be 3 seconds, which is now the default.

Since not everybody reads at the same rate or thoroughness, the auto-refresh rate can be set in user preferences. Based on analytics the most common times after 3 seconds include 30 seconds, 10 seconds, 5 seconds, and 1 second.

Block users

Block locations

I also had a difficult time deciding how to implement blocked locations, which works by comparing the tweeter’s location against the blocked location. The problem arises when a user blocks the location “Columbus, Ohio” and the tweeter’s location is “Columbus.” Although a person can clearly see the two locations are the same, “Columbus, Ohio” is not equal to “Columbus” to a computer.

The question then is do I assume that the user intends to only block exact matches for “Columbus, Ohio” or all tweets in “Columbus”? To make the software intelligent, I developed it to extract the city name automatically. However, this is an issue when you have the same city name in two locations, such as Columbus, Ohio and Columbus, Georgia. Anyone in Columbus, Georgia who wants to blocks tweets only from Columbus, Ohio will block tweets from any city named incidentally named Columbus. I guess I’ll have to keep my ears open to user complaints on this issue if it really becomes an issue at all.

Follow feature

Intended behaviors vs. Actual behaviors

It’s one thing to influences behaviors through design, it’s another to see what really happens. In my redesign of Nearby Tweets I took some questionable, albeit well thought out, usability risks by not following standard UI patterns.

I’ve found that Google Analytics is actually the best way to track user behavior, if you know what to do. I’ve setup my Google Analytics to individually track almost every user interaction with the UI. For example, I can see whether people are using typed locations, saved locations, or mapped locations. I can tell how many people set default locations, or delete saved locations. I can see it all.

As the above stats show, people are using the UI I built. 44% of the people that visit the site use some part of the UI, excluding visits to other pages. I’d like to increase that to at least half. Other people may be simply visiting the site and watching the Nearby Tweets stream, which is sufficient for me for now.

That’s it!

I hope you enjoyed this little run down of my redesign process of Nearby Tweets. Please share your ideas, thoughts, and feedback. How would you have done things differently? Has this helped you do anything different in the future?

And if you haven’t already, be sure to pay Nearby Tweets a visit and share it with your Twitter network

Related posts:

1. Diving deep into user behavior with Google Analytics, Event Tracking, and jQuery
2. Nearby Tweets Officially Leaves Beta!
3. Better user feedback on clicked links with linkNotify 2.0

Lucky for us though, PostRank—a company that monitors and collects social engagement data in real-time across the web—provides powerful Data Services that give developers API access to that social engagement data.

Today I’ll show you how to use PHP5 to fetch and display your blog’s most popular posts using PostRank’s Top Posts API.

Requirements

1. Your blog must publish an RSS feed
2. Grab your PostRank feed hash (directions
3. PHP5 is required.

Fetching the Top Posts API

This code caches the latest Top Posts API feed for an hour to maintain your website’s performance.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

function popular_postrank()
{
	//BASIC REST API URL: http://api.postrank.com/v2/feed/{feed_hash}/topposts?appkey=postrank.com/example
 
	//replace this with YOUR feed hash as discussed in the requirements
	$postrank_feed_hash = '3e7883668d6a7406078846eed577d4f8';
 
	$numposts = 10;
	$apikey = $_SERVER['HTTP_HOST'];
 
	$url = 'http://api.postrank.com/v2/feed/' . $postrank_feed_hash . '/topposts?appkey=' . $apikey . '&format=json&num=' . $numposts;
	$cache = dirname(__FILE__) . '/caches/postrank';
 
	if(filemtime($cache) < (time() - 3600))
	{
		mkdir(dirname(__FILE__) . '/caches', 0777);
		$ch = curl_init();
		curl_setopt($ch, CURLOPT_URL, $url);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt($ch, CURLOPT_REFERER, $_SERVER['REQUEST_URI']);
		$data = curl_exec($ch);
		curl_close($ch);
		$cachefile = fopen($cache, 'wb');
		fwrite($cachefile, $data);
		fclose($cachefile);
	}
	else
	{
		$data = file_get_contents($cache);
	}
	$json = json_decode($data);
 
	$html = '<ul>';
	foreach($json->items as $item)
	{
		$html .= '<li><a href="' . $item->original_link . '">' . $item->title . '</a></li>';
	}
	$html .= '</ul>';
	echo $html;
}

Displaying the popular posts

Put this anywhere you want to display your top posts.

1

<?php popular_postrank(); ?>

HTML output

Calling the above function outputs a simple HTML unordered list with the CSS class name “popular-posts”, like so:

1
2
3
4
5
6
7
8
9
10
11
12

<ul class="popular-posts">
	<li><a href="http://briancray.com/2009/12/29/understanding-user-behavior-google-analytics-event-tracking-jquery/">Diving deep into user behavior with Google Analytics, Event Tracking, and jQuery</a></li>
	<li><a href="http://briancray.com/2009/08/26/free-php-url-shortener-script/">Free PHP URL shortener script that kicks ass</a></li>
	<li><a href="http://briancray.com/2009/12/02/value-of-wireframing-website-design/">How wireframing makes your website designs better</a></li>
	<li><a href="http://briancray.com/2009/11/13/signup-process-online-community-best-practices/">Online community best practices: Effective signup process</a></li>
	<li><a href="http://briancray.com/2009/09/09/fire-the-web-designer/">Fire the “web designer”</a></li>
	<li><a href="http://briancray.com/2009/09/08/track-inbound-link-referrals-social-media-profiles-twitter-facebook/">How to track inbound links from your social media profiles (Twitter, Facebook, etc)</a></li>
	<li><a href="http://briancray.com/2009/08/26/free-php-url-shortener-script/">Free PHP URL shortener script that kicks ass</a></li>
	<li><a href="http://briancray.com/2009/11/30/omnigraffle-wireframing-960-grid-template/">Wireframing Freebie: 960 grid template for OmniGraffle</a></li>
	<li><a href="http://briancray.com/2009/09/18/web-form-validation-php/">Smart web form validation with PHP</a></li>
	<li><a href="http://briancray.com/2009/12/28/simple-image-randomizer-jquery/">Impossibly simple image randomizer with jQuery</a></li>
</ul>

Adding it to Wordpress

1. Add the popular_postrank() function to /wp-content/themes/{current_theme}/functions.php
2. Add the call to the function anywhere you want to display to top posts (likely index.php, archives.php, or single.php)

Related posts:

1. Display your recent delicious bookmarks with PHP
2. Use PHP to cache and display your tweeted links
3. Interview: Social Media PhD Scholar Vivek Kumar Shares Views On Social Media

I dare you to answer the following questions with your current Google Analytics setup

• Are your users using the main menu to navigate or do they use different means to find content?
• Do your users scroll through your content and click links in the footer?
• Do your users click on an article title or the “continue reading…” link?
• Do your users actually go through the items in my dropdown menu, or are they unaware of the dropdown menus?
• Do your users follow your related blog entry suggestions?

I’ll help you answer some of these questions right now

Using Google Analytics’ Event Tracking, you can begin tracking arbitrary events—including your users’ behaviors—inside your web pages.

Before you get started follow these 2 important steps:

1. Migrate your Google Analytics tracking code to Asynchronous Tracking
2. Move jQuery to your <head> element (I know, it’s against optimization standards, but the data payoff is worth it if you use good caching techniques)

The code

Add this to the <head> element or alongside your current jQuery code (as long as that code is in the <head>).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(function () {
	 $('a').click(function () {
		// tell analytics to save event
		try {
			_gaq.push(['_trackEvent', thisel.parents('[id!=""]:first').get(0).id, 'clicked', (thisel.text() || thisel.children('img:first').attr('alt'))]);
		}
		catch (err) {}
 
		// pause to allow google script to run
		var date = new Date();
		var curDate = null;
		do {
			curDate = new Date();
		} while(curDate-date < 300);
	});
});

Screenshot of Event Categories after installation

After installing the code above, I can see which sections on my website receive the most clicks (based on the ID attribute of the element or parent elements).

Screenshot of Event Labels after installation

After installing the code above and drilling down on an Event Category (left), I can see the captions of the links that were clicked, for example, the link text of menu items as seen below.

Getting even more user insight with Event Tracking

This is just the beginning of the rabbit hole, Alice. With proper jQuery knowledge and a thirst for user insight, you can take this technique way further.

• Track form behavior and mouse behavior.
• Track time between user actions
• Make design changes, then watch how those design changes affect actual user behavior (similar to asynchronous A/B testing).

Related posts:

1. Is your Google Analytics missing page views? Introducing Asynchronous Tracking
2. Google Analytics Hack: Track Outbound Links In 2 Easy Steps
3. Better user feedback on clicked links with linkNotify 2.0

Today’s impossibly simple code turns the task of image randomization into a 1-line jQuery code snippet. Awesome.

1. Start with an array of images

Change the image filenames in the array to the actual filenames. Don’t include the directory—filenames only.

1

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];

2a. Set a random header background with jQuery and CSS background-image

The following code assumes your header has an ID of #header and your images directory is just “/images”. Change them if necessary.

1

$('#header').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

2b. Insert a random advertisement with jQuery and DOM injection

The following code assumes your ad container has an ID of #ad and your images directory is just “/images”. Change them if necessary.

1

$('<img src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#ad');

Related posts:

1. How to remove a specific value from a javascript array
2. How to create a Twitter-style alert with jQuery, CSS, and PHP
3. Web form usability: Better form submission feedback with jQuery

Asynchronous Tracking for Google Analytics

Google has fixed missing data issues with Asynchronous Tracking. Just read this quote straight from the Asynchronous Tracking documentation:

“Even if [a] button is clicked before the browser has finished loading ga.js, the event will be captured and eventually executed. Using traditional tracking, the browser might throw an exception in this situation.”

While this quote refers to event tracking, I believe it applies to any of Google Analytics’ tracking methods, including page views.

Google Analytics Asynchronous Tracking works by queuing up tracking commands for execution when the analytics script finishes loading. Since the Asynchronous Tracking code is put in the <head> of an HTML document, it will always finish loading in time.

Comparing traditional vs. Asynchronous Tracking code

Traditional tracking code for Google Analytics

• Goes at the end of an HTML document, before </body>
• Uses document.write to insert script
• Doesn’t capture events before page load

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>

Asynchronous Tracking code for Google Analytics

• Goes at the beginning of an HTML document, before </head>
• Uses a DOM injection to insert script (geeks should like that one)
• Captures events prior to page load

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();
 
</script>

Begin using Google Analytics Asynchronous Tracking today

I became aware of Asynchronous Tracking thanks to this article on Web Resources Depot, and I’ve been using it since. So far there have been no issues with tracking or loading times. In fact, there seems to be improvements in load times and reporting.

If you do not use advanced tracking options such as event tracking or custom variables, just replace your current tracking code with the Asynchronous Tracking code (above) and you’re done!

If you do use advanced tracking options make sure you read over the Asynchronous migration examples and migrate all of your tracking code to the new format.

Related posts:

1. Diving deep into user behavior with Google Analytics, Event Tracking, and jQuery
2. Google Analytics Hack: Track Outbound Links In 2 Easy Steps
3. Wordpress plugin: Track subscriber inbound traffic in Google Analytics

See linkNotify 2.0 in action

Why do I need linkNotify?

Have you ever seen someone click a link over and over waiting for the next page to load? It’s a bad habit that’s actually counter-productive because it causes the next page’s loading to start over. This user behavior phenomenon occurs because browsers do a bad job giving feedback to the user that their click was successful and the next page is loading.

So what’s the problem? Feedback proximity.

Users aren’t looking for feedback where browsers have a progress bar. Users are staring at the page where they clicked and wondering why a new page hasn’t loaded. The loading feedback needs to be closer to the action (the click). That’s why I’ve developed linkNotify—to enhance the feedback of link clicks to improve the user’s experience of control.

Changes in version 2

How to use

Using selectors to choose which links to improve with linkNotify 2.0

$('a').linkNotify(); // work on all links with the default color of #eeeeee (light grey)
$('#content').linkNotify(); // work on all links in the content area only
$(':not(#menu) a').linkNotify(); // work on all links that aren't in the menu

Changing the default progress bar color from #eeeeee

$('a').linkNotify('#ff0000'); // red as hex color
$('a').linkNotify('blue'); // also takes color names

Download linkNotify 2.0

Download linkNotify 2.0

You can also see the plugin page hosted on jQuery at http://plugins.jquery.com/project/linknotify

Related posts:

1. New jQuery plugin: linkNotify() – An inline link click notification
2. Diving deep into user behavior with Google Analytics, Event Tracking, and jQuery
3. UX Case Study: Designing a user-focused web app

After multiple tweaks to pick the right information out of an unpredictable multidimensional structure, I finally decided to search the object for the keys I wanted and return their values. That way it wouldn’t matter if the structure changed. But alas, I couldn’t find a function that searches a multidimensional array or object for a string key and returns the value. So, I had to write my own.

Javascript source code

This modifies the String prototype to add the functionality we need. Using the string value of the object it runs on as the string key name, this function takes a multidimensional array or object as its parameter, and returns the first value it comes across (it does not continue to search).

// Use: stringvalue.findIn(multi_dimensional_array_or_object)
/***Example: 
    var tofind = 'emotion';
    var person = {'name': 'Bob Loblaw', 'age': '28', 'personality': {'smart': 'yes', 'funny': 'yes', 'emotion': 'happy'} };
    tofind.findIn(person) = 'happy'
***/
 
// The code that does it all:
String.prototype.findIn = function (multi) {
	multi = multi || '';
	var val = this.valueOf();
	if(typeof multi == 'object' || typeof multi == 'array')
	{
		if(val in multi)
		{
			return multi[val];
		}
		else
		{
			for(var x in multi)
			{
				var found = this.findIn(multi[x]);
				if(found != false)
				{
					return found;
				}
			}
		}
	}
	return false;
};

Related posts:

1. How to remove a specific value from a javascript array
2. How to calculate distance with javascript and Google Maps API

The value of wireframing comes down to a simple idea: Wireframing forces you to think about your user interface design decisions in terms of user needs first, instead of in terms of what looks good.

Ideal website design deliverables from start to finish

Removing the wireframe from the website design process

Without wireframing your website designs, you’re vulnerable to these design pitfalls:

• Lack of focus on strategic UI design. Taking a website design from conceptual design to UI means considering the strategic value of UI components, which doesn’t always happen when you’re considering 48 shades of red.
• Client focuses on appearance rather than strategy. It’s easy to get caught up in how something looks, and everyone thinks they’re an expert on looks. Using wireframes helps keep everyone’s focus on strategic design decisions.
• Unable to justify user interface design decisions to stakeholders. If you’ve carefully thought about the value of UI components before moving into skinning and prototyping, you’re armed with the power of reason against inevitable uninformed criticisms.
• Changes to page structure are more difficult in later stages. If you’ve already tweaked everything to look beautiful in Photoshop, changes to structural issues can quickly turn into massive headaches. Moving things around in a wireframe is super simple.

How to start wireframing

Starting to wireframe websites can range from something as simple as sketching layout ideas on a napkin to using more advanced wireframing software, such as OmniGraffle for OS X users or MS Visio for Windows users. Other options include graphing paper, which helps make straight and measured lines, or web-based options such as Mockingbird or Balsamiq Mockups.

The important thing is to focus on the strategic why while you sketch things out, and not on what shade of blue you’ll use or what technology you’ll use. Usually website designs that have been “wireframed” turn out simpler to design and easier to use.

Conclusion

Taking time to wireframe your website can save time and headaches further along in the website design process for both you and your clients. On your next website, put a wireframe in front of your client and work together on strategic design decisions before jumping in front of Photoshop. You may be happy with the results.

Related posts:

1. Needs assessment: the most important process in web design
2. 9 compelling reasons to build a single-purpose website
3. Rethinking website navigation design

Installation

1. Download Website (960 grid).gtemplate OmniGraffle template (Apple OS X only)
2. Move from Downloads to /Users/xxxxx/Library/Application Support/OmniGraffle/Templates/ where xxxxx is your OS X username
3. When starting a new document in OmniGraffle, select Website (960 grid) as your template

Related posts:

1. How wireframing makes your website designs better
2. Display popular posts based on social media engagement with PostRank Top Posts API

4 elements of an effective online community signup process

1. Easy to use web form design

As Luke Wroblewski put it in Web Form Design in the Wild, Part II, “Forms control the gates of membership.” Never take form design with a grain of salt. Filling out web forms requires the highest level of user commitment and are the most complex UI elements of a website.

Although people kill time browsing the Web, they don’t kill that time by looking for the next web form to fill out. In fact, you and I, as well as every other user out there in the world avoid web forms like the plague. So if your signup form is complicated then go ahead and call it quits. Complex forms are the bane of conversion.

Here are a few quick tips to make your web forms easier to use:

• Make form fields and labels align vertically, not horizontally
• Make form field size relative to the expected input length
• If it must be a long form, break it into logical sections (a quick card sort can help do that)
• Show an example of expected input
• Don’t force the user to follow formats (like xxx-xxx-xxxx). Format input after submission programmatically
• Make the call to action, or submit button, very easy to find
• Avoid CAPTCHA by using better data validation. Deleting a few spam accounts is better than pissing users off from the start

2. Lazy registration

Lazy registration is a relatively new concept to the scene, made possible by increasing levels of interactivity on the Web. What is lazy registration? While guests use the features available to them, their behaviors and preferences are stored in cookies. When guests finally register because your online community website kicks ass, some of the information is already filled out from the cookies.

An example of lazy registration is if a guest posts a comment and inputs their name and email address, that information is stored in a cookie. When he signups because he wants a profile and access to member-only benefits, the signup form will draw that information from cookies, saving users valuable time and keystrokes.

3. Partial commitment

Partial commitment is a persuasion strategy as old as dirt. It’s the reason why you’re more likely to keep hearing “yes” if a person has been responding with “yes.” It’s the reason why that tricky car salesman asks you to take a test drive. Commitment in little chunks at a time simply works. While some of these tricks are unethical exploitations, getting partial commitment to increase online community signups on the web is not only an effective sales technique, it’s good for users, too.

The benefit to users is somewhat related to the idea of progressive disclosure in that users only need what they need in each moment to complete a task because any more is overwhelming. In terms of online community commitment, users don’t want to spend time writing a biography to join your online community. They want to do the minimum required to start playing. They’ll give you more information as they find another benefit they want to unlock.

If you’re thinking, “I’ll give them a complete form, but mark only a few fields as required,” you should know that users tend to fill out all fields and ignore requirements. Just give them the bare minimum fields required to sign up initially, and all other fields available to fill out at their leisure.

4. Build confidence

As with any commitment, people need confidence in their decision. When submitting personal information over the web, users need to be confident that their information is protected and respected.

The most important thing is to address their concern for privacy, which is usually done through a privacy policy. Most privacy policies are failures because they are stuffed down into the footer—a place where users never look when filling out forms—and they are full of legal jargon gobbledygook. When has legal jargon gobbledygook ever made you feel comforted?

Good privacy policies are short, written in plain speak, and very easy to find—like a link at the top of the form. Give the link to your privacy policy a teaser, such as “We have a privacy policy to keep your information private. [link to privacy policy].”

Other elements of building user confidence include

• Well designed UI
• Consistent branding from page to page
• A secure form (use a lock icon above the form, don’t rely on the https in the address bar to tell the story)
• Pull quotes from current members
• Reinforcement of membership benefits

Bonus tip: Confirmation

Although you’ve led your new members through an effective signup process, your followup/confirmation e-mail is just as important. Followup e-mails play key roles in the signup process:

• Users feel confident that they successfully completed the process
• Users have a record of their username and password (because they’ll forget it almost certainly)
• Users are reminded of their account later as they browse their inbox
• Followups are great opportunities to progressively “sale” additional benefits of membership. Provide them with ideas of what they can begin doing

Conclusion

Your signup form may be the most crucial part of your online community. You should be doing everything you can to insure an easy signup process that makes the user feel safe.

Related posts:

1. Online community best practices: Reward your top users
2. Guidelines for highly effective Websites
3. 3 eye tracking studies that influenced my latest redesign

Why has it been so long you ask? The past few weeks I’ve been cranking out Nearby Tweets v2, and today it hit private beta stage. By the way feel free to request private beta access to Nearby Tweets v2.

So what’s next? Time to start providing valuable content to readers through my blog again, but with a little shift.

Going forward my freelance services will be rebranded and focused on social experience design, which is basically helping businesses design and implement social strategies for the web. My blog’s content will receive a similar rebrand and focus on content that matches social experience design.

So that’s what’s new. Are you interesting in receiving content about designing and implementing social strategies for the web, such as online communities, social networks, and open APIs?

Related posts:

1. 9 compelling reasons to build a single-purpose website
2. Blog design best practice: Scrollbars not sidebars
3. Online community best practices: Reward your top users

This tutorial will help you build a scroll to top link, or whatever you call it, that appears when the user scrolls down, and disappears when users reach the top of the page using a combination of CSS and jQuery (a free javascript framework). You’ll need to download jQuery if you aren’t using it already.

Demo

You can either view the demo source if you’re an advanced developer, or read on and I’ll go through the CSS, jQuery, and HTML code separately below.

The HTML (inside the <body>)

<body>
<div id="top"></div>
<!-- put all of your normal <body> stuff here -->
<div id="message"><a href="top">Scroll to top</a></div>
</body>

The CSS

#message a
{
	/* display: block before hiding */
	display: block;
	display: none;
 
	/* link is above all other elements */
	z-index: 999; 
 
	/* link doesn't hide text behind it */
	opacity: .8;
 
	/* link stays at same place on page */
	position: fixed;
 
	/* link goes at the bottom of the page */
	top: 100%;
	margin-top: -80px; /* = height + preferred bottom margin */
 
	/* link is centered */
	left: 50%;
	margin-left: -160px; /* = half of width */
 
	/* round the corners (to your preference) */
	-moz-border-radius: 24px;
	-webkit-border-radius: 24px;
 
	/* make it big and easy to see (size, style to preferences) */
	width: 300px;
	line-height: 48px;
	height: 48px;
	padding: 10px;
	background-color: #000;
	font-size: 24px;
	text-align: center;
	color: #fff;
}

The jQuery

$(function () { // run this code on page load (AKA DOM load)
 
	/* set variables locally for increased performance */
	var scroll_timer;
	var displayed = false;
	var $message = $('#message a');
	var $window = $(window);
	var top = $(document.body).children(0).position().top;
 
	/* react to scroll event on window */
	$window.scroll(function () {
		window.clearTimeout(scroll_timer);
		scroll_timer = window.setTimeout(function () { // use a timer for performance
			if($window.scrollTop() <= top) // hide if at the top of the page
			{
				displayed = false;
				$message.fadeOut(500);
			}
			else if(displayed == false) // show if scrolling down
			{
				displayed = true;
				$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
			}
		}, 100);
	});
});

Full source

To view the full source code together in one file, go to the demo and view the source code there.

Conclusion

You’re all done! Combine the HTML, CSS, and jQuery code together into one file, or separate them out into your existing external stylesheet and javascript files. Don’t forget to put your CSS inside the <head> element and your javascript (jQuery) right before the </body> tag, always.

See the end result

Related posts:

1. New jQuery plugin: linkNotify() – An inline link click notification
2. How to create a Twitter-style alert with jQuery, CSS, and PHP
3. Web form usability: Better form submission feedback with jQuery

// from this
var arr = ['remove', 'specific', 'value', 'from', 'javascript', 'array']; // 6 items
 
// to this ("specific" value removed)
var arr = ['remove', 'value', 'from', 'javascript', 'array']; //  5 items
 
// use this (removes "specific")
arr.splice(arr.indexOf('specific'), 1);
 
 
// full example
var arr = ['remove', 'specific', 'value', 'from', 'javascript', 'array'];
var value_to_remove = 'specific';
arr.splice(arr.indexOf(value_to_remove), 1);
 
 
// note: to support IE (anger rising as I type), you'll need this (thanks James!):
if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length >>> 0;
 
    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;
 
    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

Related posts:

1. Javascript snippet: Find the value of a string key in a multidimensional array or object
2. Remove NULL values from PHP arrays with 1 line
3. Impossibly simple image randomizer with jQuery

Strategic design decisions

You’ll be in trouble from the very beginning as you sit down in front of your monitor and ask yourself “What should this design look like?” You won’t have an answer, because you know that designs drive behavior, and you don’t know what behavior to design for.

Knowing what your clients want from their websites makes strategic design decisions simple to answer, because the following question need only be answered: “How can I design this part so that users do more of what my client wants?”

Measurement

When it comes time to propose additions, changes, or complete redesigns, how will you justify your proposal? A simple “You need a fresh look” barely gets by anymore. Websites aren’t novelty.

Knowing what your clients want out of their websites gives you something to measure, and more importantly, gives you something to justify continued work. For example, if you know a client wants leads generated from their website, you can measure how many leads are currently being generated, and offer design optimizations or an A/B test to increase lead generation rates. While your client may not want to pay for a redesign, they do want more leads and they’re willing to pay for them.

Client satisfaction

Anytime I hear a client talking about a bad past experience, it feels like their previous consultant designed a brochure website and left them dry. When I hear happy businesses talking about their web consultants, they always focus on how “my website has improved my business.” How can you show that you’re improving your clients business if the website doesn’t have a purpose?

Clients become happy clients when you prove to them that you have improved their business. It all begins with knowing what clients want out of their websites, designing for it, measuring it, and proving that you’ve given them more of what they wanted.

Related posts:

1. Getting your clients to pay more for web services
2. How wireframing makes your website designs better
3. 9 compelling reasons to build a single-purpose website

This tutorial should help you build smarter web forms with PHP and save you a ton of time.

Let’s start with web form sanitization.

Sanitize all user input through a standard PHP function

User input sometimes has unnecessary whitespace, so we’ll trim that off. We’ll also check if magic_quotes_gpc is automatically adding backslashes to user input and remove as necessary.

$hasgpc = get_magic_quotes_gpc();
foreach($_POST as $field => $value)
{
	$value = trim($value);
	if($hasgpc)
	{
		$value = stripslashes($value);
	}
	$filtered_post[$field] = $value;
}

Add user input verification

To verify user input, we’ll first add meta information about each web form input field to its name property.

Adding field properties to each field on the web form display side

Notice the use of the underline to separate a field’s properties in the name.

<form method="post" action="myscript.php">
<input type="text" name="username_required_alphanumeric">
<input type="text" name="email_required_emailaddress">
</form>

Verifying form input using on the web form submission side

$hasgpc = get_magic_quotes_gpc();
foreach($_POST as $field => $value)
{
	/* first we extract the actual intended field name */
 
	$fieldinfo = explode('_', $field); // turn the posted field name into an array of properties
	$field = array_shift($fieldinfo); // take the first element as the intended field name
 
	/* do the standard stuff we discussed above */
 
	$value = trim($value);
	if($hasgpc)
	{
		$value = stripslashes($value);
	}
	$filtered_post[$field] = $value;
 
	/* new stuff to verify user input based on $fieldinfo */
 
	if(array_search('required', $fieldinfo) && empty($value))
	{
		$error = TRUE;
	}
	if(array_search('emailaddress', $fieldinfo) && !preg_match('|^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$|i', $value))
	{
		$error = TRUE;
	}
	if(array_search('alphanumeric', $fieldinfo) && preg_match('|[^a-z0-9]|i', $value))
	{
		$error = TRUE;
	}
}
 
/* if there were errors in the web form, send the user back to make changes */
if($error)
{
	header('Location: ' . $_SERVER['HTTP_REFERER']);
	exit;
}
 
/*
at this point the form has been cleaned and validated.
reference the fields with $filtered_post, such as $filtered_post['username']
*/

Things to consider about this method

• This tutorial is supposed to emphasize web form sanitization and validation with PHP. You can greatly improve the user feedback on errors versus what I’ve used above. In fact I compell you to for the user’s sake. One way to do this is to pass the errors back in the session and display them above the web form. I’d also recommend sending back the submitted values so the user doesn’t have to retype them.
• While this method kicks ass, it has its limitations. The one I thought of is that a field cannot be named the same thing as a filter. For example, <input type="text" name="emailaddress_required_emailaddress"> wouldn’t work.
• Starting with PHP 5.2.0 you can use filter_var() to validate fields instead of regular expressions as used above.
• A few people have pointed out that this is not the most secure method of form validation because someone can hack the form field names. Keep that in mind if you decide to use this method of form validation.

If you have any questions or comments, feel free to leave them below!

Related posts:

1. Web form usability: Better form submission feedback with jQuery
2. Online community best practices: Effective signup process

Reading into the phrase “I want a website,” I hear “I want a website and I don’t really know why.” Since your client doesn’t know why, they will pay for a website designed by the lowest bidder because all bidders make websites.

But not all bidders solve problems.

Professional and experienced web professionals don’t build websites. They solve business problems using the web. If your client says “I want to build a better relationship with my customers” they will pay for the person who can best solve their problem, which probably won’t be the lowest bidder.

It’s the web professional’s job to educate the “I want a website” crowd on the benefits of having a website before providing an estimate. Through initial discussion identify their business problems and then outline how you plan to solve them. Make sure your clients know all that you’re actually doing for them. I bet cost will become less of an issue.

If you’re the web professional who at this point is saying “That might be true for bigger clients, but I deal with many small businesses that are always thinking about cost,” let’s build problem/solution scenarios for a good ol’ fashioned mom and pop shop.

A website:

• Generates new leads = increased profit
• Cross- and upsells current customers = increased profit
• Answers frequently asked questions for customers = decreased cost (someone has to be available to answer customer questions otherwise)
• Raises perceived brand value = increased profit

You see, once you build that website they’ll begin sending everyone to their website. It’s now their primary marketing & sales channel. Over time much of their new business will be driven from their website. Are you clients not willing to pay more for that?

Related posts:

1. Needs assessment: the most important process in web design
2. How wireframing makes your website designs better
3. Why some web apps are successful and others aren’t

Web teams still need graphic designers to communicate visually appealing messages. And graphic designers moving from a print team to a web team should stay graphic designers. What’s needed to compliment a web team’s graphic designer is someone to account for the complexities of human-computer interaction (HCI). Surely a manager in any field can’t expect staff to adopt a completely opposite, complex knowledge base overnight.

Welcome the missing link: User experience designer.

User experience design is a blend of usability, information architecture (IA), and user interface (UI) design.

A web-based user experience designer is charged with learning about users and creating interfaces that match website goals and user needs. They deliver interaction specs and simple mockups to the graphic designer as a framework for user-centered visual communication. Then, of course, the web developer makes the interaction work.

Don’t mix up the two roles, user experience designer and graphic designer. Neither should do the others’ job. They should never be blurred into “web designer.”

If you’re going to make the leap into a more complex communication channel, account for its complexities or it’ll bite you in the ass when your competitors “get it.”

Related posts:

1. 10 signs of professional web design (Or why you should drop your amateur web designer)

For example what if I want to track how many people open briancray.com by clicking on my Twitter profile link? That’s what this tutorial is about and it can be applied to any social media profile, whether it’s Facebook, LinkedIn, or the myriad of others.

Step 1: Create trackable link

Visit Google’s URL Builder to build a URL that can be separately tracked in Google Analytics. Fill in the spaces as pictured below (changed to reflect your site and social media profile of choice, of course).

Step 2: Shorten trackable link

Google’s URL Builder makes a long URL even longer. To make it appear less daunting let’s shorten it. In the picture below I used bit.ly, which seems like the best choice.

Step 3: Add shortened trackable link to social media profile

You’ve got your trackable link and it’s been shortened. All you have to do now is add it to your various social media profiles!

Step 4 (completed next day): Track your URL in Google Analytics

Because we used Google’s URL Builder, everytime someone clicks on that link Google will automatically track it in Google Analytics. Just go to Traffic Sources » Campaigns in Google Analytics and there you’ll find your referrals (Or you won’t if noone actually clicks the link).

Depending on your traffic, give Google Analytics about a day to begin reporting the referrals. They won’t show up immediately.

Related posts:

1. Wordpress plugin: Track subscriber inbound traffic in Google Analytics
2. Interview: Social Media PhD Scholar Vivek Kumar Shares Views On Social Media
3. Google Analytics Hack: Track Outbound Links In 2 Easy Steps