It seems that very little people have heard of let along understand what user experience (UX) and information architecture (IA) mean. These are little known subfields within web design and development that are nonetheless extremely important.

I’m going to talk about UX, but here’s a great animation explaining IA, that you don’t want to miss.

User Experience Design

User experience design, according to Wikipedia, is a field of experience design that pertains to the creation of the architecture and interaction models that impact user experience of a device or system. The simple way of describing UX would be to design the interface / system to enable users to do what they need to do. Ultimately, UX is the art of making something a joy to use: the creation of a system that users will take delight in interacting with time and time again.

Determining User Needs

The first step of this process is to figure out what the users want and how they do their tasks. We can go ask them… however often times they don’t really know what they want or how they do it, even when they think they do. Just think of home electronics, say the DVD player. The one that looks the best at the store would be the latest model with all the bells and whistles. Yet how many of those special features do we end up using or even know how to use? Take a look at the number of players with the blinking 00:00. Most people (myself included) just stick the disc in and hit play.

This is why the best way of understanding user needs is by observations. Field studies are the best, but they’re intrusive and costly to do. So we often study server logs to look at what people do in the past. Here’s where UX involves a ton of data analysis to tease out the common tasks and the users’ preferred work flow.

Once we understood what the users need, we can then design the process of the web app or the structure of a website to help users carry out their tasks quicker and easier.

Onboarding — Make Learning Easy

More accomplishment with less effort equals a winning experience. How to decrease effort? By reducing the learning curve, make it easy and intuitive to learn. They call this “onboarding”, the process of helping the user to get started by removing the deer-in-the-headlights feeling of “Ummm…. what am I suppose to do here?&dquo;

It all depends on the context and our users. Sometimes we can use wizards, offering suggestions on the things they can do and walk them through the process. Other times, we can borrow from a process that the users are already familiar with. For example, most people are familiar with the iPhone two-finger pinch gesture for zooming. Other multi-touch interfaces should use the same gesture for similar tasks… like zooming in to view details of an item, or resizing an item. However, an elderly person, who have never interacted with an iPhone before, would not know what to do. In this case, a button with a magnifying glass symbol may be easier to learn, despite the control being slower to use. This is the reason UX practitioners spend a fair amount of time doing user research to figure out what will work best for the particular case.

Making Recommendations

Next comes the physical part… summarizing our thoughts and recommendations in the form of user personas, site maps, user flow diagrams and wireframes. This is one of my favourite parts working in UX, the hands-on paper and digital sketches.

The web designers and developers then take these documentations as the blueprint to build the actual website. This is usually a back and forth process. We offer suggestions, the designers and developers, in turn, tell us what’s feasible and what’s not. We go through several rounds to produce a user-friendly website.

Even after the website is complete, work is still not finished. We also do usability reviews and usability tests to ensure what we’ve built works well for the users. Actually, this is an iterative process that should be ongoing through website development and post-launch. We invite users to try out our website, or prototype or even just paper mockups and see if there’s any problem areas with the current design. This can be formal test lab sessions in which participants come in to do the testing, or it can be completely informal in which we grab people online and show them the designs. We then summarize our findings and offer recommendations on improving the web experience. Then we do more testing in a continuous cycle to further enhance the user’s experience.

As UX of systems and devices continue to improve, the user will be able to complete tasks more efficiently and have fun while doing them. Also with the advancement of touch-screen & 4-D technology, there are more opportunities than ever to custom tailor immersive experiences for the users. Actually, some of these are already here. Check out Samsung’s 3D game on YouTube.

And this is what UX is about: researching, testing and making recommendations in order for the web development team to deliver addictive products that surprise and delight you. All this is brought to you by your local user experience professionals.

Here’s the code:

var currSlide = 0; // this is the counter to track the current slide
var SlideshowLength = 5; // this determines the length of the slideshow array

function gotoNextSlide(this) { // call this function to advance slide
	currSlide++;
	currSlide%=slideshowLength; // Taking the remainder of the length automatically "resets" numbers greater than Length - 1 back into range

	/* Do slide transition stuff */
}

function gotoPrevSlide(this) { // call this function to advance slide
	currSlide = currSlide + slideshowLength - 1; // Takes the counter up one less than the multiple of the current slide number.
	currSlide%=slideshowLength; // Taking the remainder of the length automatically "resets" numbers greater than Length - 1 back into range.
	// If currSlide = 0, 0+5-1= 4, 4%5 = 4; If currSlide = 4, 4+5-1= 8 , 8%5 = 3

	/* Do slide transition stuff */
}

Some of the social network representatives even go about saying

“They don’t consider their user names or ID numbers to be personally identifiable, because unlike Facebook, consumers are not required to submit their real names when signing up for an account. They also said since they are passing along the user name of the page the ad is on, not for the person clicking on the ad, there is nothing advertisers can do with the data beyond seeing on what page their ad appeared.”

It [MySpace] is only sharing the ID name users create for the site, which permits access only to the information that a user makes publicly available on the site.”

All I can say to this is ouch!

When doing research or any sort of data collecting on people, the standard is absolute anonymity.

• People must sign consent forms before data can even be collected
• Only aggregate data should be presented: aggregate as in presenting things in terms of percentage and averages, and general trends
• People are only ever identified by ID numbers even in the raw data: You should not be able to tell this set of data comes from John Doe, regardless of whether this is a real name or a screen name

Now with that in mind, let’s examine the social network ads system.

• No consent: most people (myself included) do not even realize advertisers can track every single ad click, let alone who is doing the clicking
• No aggregation of data: advertisers know exactly who’s doing the clicking, from where and at what time
• No coded ID numbers used: most social networks attach public username or user ID to their ad links, which means advertisers can look you up on the network

There is virtually zero privacy protection in these ad systems. I cannot believe this has been happening for so long and only came into light now. I am thankful Facebook and MySpace are now starting to correct this issue. Hopefully the rest of the social networks will follow suit.

There it is in action: Mouse Track 2 Demo.

Again, you need jQuery 1.3 for this to work. I’ve also added the easeInOutQuart transition on the mouseleave animation. So be sure to link the jQuery easing plug-in as well.

Here’s the code:

HTML head

HTML body

0,0

Quick Explanation of HTML/CSS

The a tags in the left & right nav element is absolutely positioned at the center of their surround slidePrev & slideNext div tags. The slide divs are then inside another div with the class of wrapslide that allows each nav slider to be absolutely positioned relative to the window.

The height of the slidePrev, slideNext and wrapslide divs, as well as the height of the enclosed a tag are used in the jQuery calculations. The rest of the code should be self-explanatory.

jQuery

/* mousetrack.js */
var yTop; // distance wrapslide is from the top of the page

jQuery.easing.def = "easeInOutQuart"; // apply easeInOutQuart easing

function mouseFollow(e, id) { // mouseFollow() is called whenever the mouse enters a nav slider, id assigned to be slidePrev or slideNext
	var mouseYPos = e.pageY - yTop; // y-coord of mouse relative to wrapslide
		$('#readout').html('yTop =' + yTop + ', e.pageY' + e.pageY + ', mouseYPos = ' + mouseYPos); // display mouse tracking data, can be removed

	var heightBox = $(id + ' a').height(); // find height of clickable a tag
	var slideHeight = $(id).height(); // height of slidePrev or slideNext, the length of the whole slide-able area
	if (mouseYPos > 0 && mouseYPos < slideHeight ) { //ensure clickable a tag does not slide off #slidePrev or #slideNext

		var boxYPos; // this will track where the top of the a tag should be
		if (mouseYPos < (heightBox / 2)) { // prevents a tag from sliding above #slidePrev when the mouse is near the top of the div
			boxYPos = heightBox / 2;	 // force a tag to stay within div
		}
		else if (mouseYPos > slideHeight - (heightBox / 2)) { // prevents a tag from sliding below div when the mouse is near the bottom of the div
			boxYPos = slideHeight - (heightBox / 2); // force a tag to stay within div
		}
		else { boxYPos = mouseYPos; } // allow a tag to follow mouse if the mouse is in the middle of the div

		$(id + ' a').stop(true, true); // stops the mouseEnd() animation, so the a tag follows the mouse without delay.
		$(id + ' a').css('top', boxYPos - (heightBox / 2)); // - (heightBox/2) puts the mouse pointer in the center of the a tag.
	}
}

function mouseEnd(id) { // mouseEnd is called when the mouse leaves the nav slider
	var slideHeight = $(id).height();
	var heightBox = $(id + ' a').height();
	$(id + ' a').animate({top: (slideHeight/2) - (heightBox/2)}, 500); // a tag will ease back to the center of the div when the mouse leaves the div area
}

$( function(){

	// grab distance wrapslide is from the top of the page
	yTop = $('div.wrapslide').css('top');
	yTop = parseInt(yTop); // strips the unit from css property (e.g. 50px becomes 50)

	// tracks mouse movement inside slider area
	$('#slidePrev').mousemove(function(e){
		mouseFollow(e, '#slidePrev');
	});
	$('#slideNext').mousemove(function(e){
		mouseFollow(e, '#slideNext');
	});

	// reset button location when pointer leaves slider area
	$('#slidePrev').mouseleave( function() {
		mouseEnd('#slidePrev');
	});
	$('#slideNext').mouseleave( function() {
		mouseEnd('#slideNext');
	});

});

I’ve added fairly detailed comments to the jQuery code… hopefully you can understand what I meant.

This was perfect for designing my nav button slider, in which the button needs to slide along with the pointer. I only got the basic follow mouse function so far, but it’s still pretty neat.

View Demo

Here’s the code:

HTML head

HTML body

0,0

jQuery

/* mousetrack.js */
var yTop; // distance wrapslide from top
var xLeft; // distance wrapslide from left

var isRunning = false; // tracks slide animation state

$( function(){

	// grab distance wrapslide is from the top & left of the page
	yTop = $('#wrapslide').css('top');
	yTop = yTop.substring(0, yTop.indexOf('px'));
	xLeft = $('#wrapslide').css('left');
	xLeft = xLeft.substring(0, xLeft.indexOf('px'));

	// tracks mouse movement
	$('#slide').mousemove(function(e){
		var mouseXPos = e.pageX - xLeft; // x-coord of mouse relative to wrapslide
		var mouseYPos = e.pageY - yTop;
		$('#readout').html('yTop =' + yTop + ', xLeft =' + xLeft + ', e.pageX' + e.pageX + ', e.pageY' + e.pageY + ', mouseXPos = ' + mouseXPos + ', mouseYPos = ' + mouseYPos);

		var heightBox = $('#slide a').height(); // find height of clickable a tag
		if (mouseYPos - (heightBox / 2) > 0 && mouseYPos < $('#wrapslide').height() - (heightBox / 2) ) { //ensure clickable a tag does not slide off #slide box, inactivates top & bottom of #slide by half of clickable a's height.

			//$('#slide a').css('top', mouseYPos-50);
			if (!isRunning) {
				$('#slide a').animate({top: mouseYPos-50}, 15, 'linear', function() {
					isRunning = false;
				});
			}
		}

Right now the animation is still rather choppy, especially if the animation delay time is set higher and if the pointer moves in and out of the #wrapslide box. I'm going to add in an animation to return the button back to the center when the mouse leaves the area. Maybe that'll improve things. But for now, it's still fun to play with. :) Do let me know if you create something cool with jQuery mouse tracking. I can see there's potentially tons of things that you can do with it.

Searched in the WP forum and the only hint I found was on this support thread: Google Reader: No Full Text RSS feed since WordPress 2.8?.

I managed to work it out. Yay! Here’s the code hack to display full text RSS feeds:

Open up feed-rss2.php in the wp-includes folder

Find the line (should be line 44)

<?php if (get_option('rss_use_excerpt')) : ?>
		]]>
<?php else : ?>
		]]>

Replace that with

<?php if (get_option('rss_use_excerpt')) : ?>
		]]>
<?php else : ?>
		]]>

Basically, the code originally displays the excerpt rss feed regardless of whether you set the rss to use excerpt or not. What we did was to fix it so that the full text version (the_content_feed()) is used if you haven’t set it to use excerpts.

So make change in the file and save the new version back onto your server and you’ll be good to go! :)

If you are a beginner and want to learn about WordPress, you definitely should take a look. This is a school project. So if you have any suggestions on how to make it better, do let me know.

Another plug: the link is HTML 2 WordPress. Thanks!

I’m going to put all of these tutorials together, along with written descriptions, on my e-learning site HTML 2 WordPress. That’s scheduled to launch at the end of the month.

Enough chit chat, time for more vids!

Remember you can view these in HD. :D

WordPress Tutorial: Customizing Header.php Part 1/4

WordPress Tutorial: Customizing Header.php Part 2/4

WordPress Tutorial: Customizing Header.php Part 3/4

WordPress Tutorial: Customizing Header.php Part 4/4

WordPress Tutorial: Customizing Sidebar.php Part 1/3

WordPress Tutorial: Customizing Sidebar.php Part 2/3

WordPress Tutorial: Customizing Sidebar.php Part 3/3

All vids available in HD. For best viewing, visit the corresponding YouTube page.

How to install a local web server onto your computer

How to setup WordPress Part 1

How to setup WordPress Part 2

How to secure your WP site Part 1

How to secure your WordPress site Part 2

I’m talking about HeadSpace2 SEO. It allows you to customize titles, meta descriptions and keywords for all your pages using one simple interface. It also adds additional widgets to your new post and new page interface to allow you to specify page title, description and tags for that page. There’s also a tags widget that offers you suggestions based on your content and yahoo search. I did not notice any bugs customizing the page settings using the latest version (HeadSpace2 SEO v3.6.32) with WordPress 2.9.2.

Google Analytics under the Site Modules tab also works fine… Google Webmaster Tools doesn’t though. However that is easy enough to add into the header.php template file. So overall the plug-in does the job.

I’ve also installed Google XML SiteMaps to autogenerate sitemaps to NNbox.ca and notify search engines every time new content is added to the site. It’s a breeze to install and seems to work perfectly with WP 2.9.2. Good stuff!