Webmasters Gallery

Userfly is described as usability testing made easy. Since my review of Feedback Army I have been overwhelmed with different websites offering usability services in a quick and easy package. However, Userfly seems to stand out from the crowd! I have put it to the test and brought you my findings.

After using Userfly I can see why so many people talk about it. This application is thoroughly thought out and professionally done. To top it off, they even offer 10 free recordings a month to see if the service is right for you. How could I resist the temptation of testing such a service?

How it works

Userfly describes it’s service as the following:

userfly.com provides instantaneous web user studies by recording user visits and letting you play them back to see every mouse movement, click, and form interaction. Conducting a user study doesn’t have to be expensive or a logistic nightmare. With userfly.com you can perform simple and cheap user testing with your real users. And it only takes one minute to set up!

Userfly operates through a piece of javascript you place in your head tag.

I would say this is a pretty straight forward description of the service that I found to be true. This service allows you to easily record your visitors and reports are offered you to in video format. This report also contains many other helpful features and options.

Using Userfly to record your users is only the first step, however. Let me give you some insight on how to use this to better your website.

Steps to learning from Userfly

Following these steps can help you understand your user’s interactions with your website. Learning from these actions can help you improve UX by watching the movements within your user interface.

1. Embed the Code

   Once you sign up you are brought to offered a tab labeled Install. This option will present you with the javascript you asked to place in your head tag. There is even an option for one click install for TypePad and Blogger users.

   Be sure to check your site after you’ve installed the javascript. We had a slight mishap at UX Booth when entering the javascript. It seems that the script adds IDs to elements that don’t have IDs. Now I am not a big coder so I can not go into detail but Andrew and I looked into it a bit and discovered the CSS for our headers did not agree with having an ID added to them. For a short period of time our headers were whacked out and we had to remove the code. I continued testing on my gecko blog that I run and had no errors there.

   Also, be sure to remove the code when you want to stop testing. It seems there is a small bug at the moment that records the occastional visitor even when you specify a pause in the session recording in the Userfly control panel.

2. Wait for Users

   Once the javascript is installed the recordings start rolling in. Be patient, you will want to wait an hour or two if your website does not have high traffic to attain some real valuable recordings! Running Userfly on my gecko blog, which averages only between 100 to 200 visitors per day, I got some great results in the first 10 to 15 minutes but the real eye opening recordings happened in the next few hours.

   Also notice that Userfly by default will record you as a visitor too. You do have the option to block IPs through the control panel. You may consider doing this for your IP. Something else I noticed is that recordings that are very short are not added to your listings to prevent wasted time and money. I really liked seeing this!

3. Understand the Reports

   Each aspect of the Recordings page is important. The first portion of the Recordings page tells you what page was recorded. This is important to take note of as it is the starting point at which you viewer has landed on. Various parts of your website may have different templates and structures and it is important to take note of how possible first time visitors react with exposure to each type of page.

   The next part of the report shows you exactly where the user came from, if it can be detected. I saw an interesting difference in visitors from different sources. Some of our readers that visited from PSD Tuts stuck around and read articles in depth, while visitors from social websites came and skimmed very quickly. More research is needed to understand if this is valid pattern but it is something to consider when trying to keep users around for longer.

   The next two features are date, as in when the recording was captured, and page views, which tells you how many pages were viewed in the visit and how long the user was there. Both of these things can be factored into a bigger picture to see how different influences may change your users duration and exploration.

   Next is the location of the visitor with an option to view this location on a map. Users from different countries or even regions may interact with your site differently. Finally you are presented the browser the user is viewing you with as well as the option to save, delete, or ban an IP.

4. Watch the Videos

   Watching the videos is also very simple process. Simply select a visit and enjoy.

   This part is the most important bit, really. You need to set aside some time to sit and watch these. They can sometimes be boring and often time consuming. Some recordings it seems like the user fell asleep at the mouse when reading. Just remember, these interactions are what will lead you to your improvements!

5. Take Note of Interactions

   This really is the epiphany of Userfly. Pay special attention when watching those interaction recordings.

   Are users from search engines visiting your website and immediately leaving through google ads? Is it worth the loss? Do users from a specific forum seem to stay longer? Would you consider advertising with them to increase a stable audience?

   Ask yourself these kind of questions. Also, pay attention to what people click on and how they navigate. You know your design, you think it works well. You may be surprised when people click on items you never thought would look like links or not understand how to easily return to the home page. Studying these interactions can build a data bank of knowledge that will increase your UX skills and bring you up that extra notch you need!

6. Correct Problems

   This is it, time to bring it home. Now that you’ve amassed a list of problems that your website showcases you can now correct them! Use what you’ve learned and apply it to make the user experience better and more enjoyable for your users. It will easily increase profits, subscribers, and viewers.

   Don’t stop now though. Test again, improve again, and repeat! The fight is a never ending one for people interested in improving usability.

Liveblogging may very well be the future of traditional news media and blogging. Now you can stream information live on the internet and Twitter while an event is happening using nothing more than your laptop and free LiveBlogging software.

People have been doing it on a widespread basis for the past year, thanks to a plethora of free LiveBlogging tools that have sprung up almost overnight.

Whether you are a business striving to build a name and reputation in your industry or you are a web designer or web dev pro building a reputation, you need to be aware of Liveblogging and the tools used to conduct it.

We have moved from the “I’m blogging this” world to the “I’m Liveblogging this” world very quickly. People are no longer satisfied with hearing news after it has happened – they want access to news while it is happening.

If you don’t want to commit to sitting at a conference or a lecture typing out what the speaker is saying verbatim, you can opt instead to do Twitter updates that you can send out to any Twitter users that you care to enter into your LiveBlog software package. This gives you the opportunity to get your feet wet with Liveblogging.

Do I Have to Liveblog?

Liveblogging is a great way to build up a following and to network. Invite fellow professionals who you will be attending a conference with to Liveblog with you, thus forging an immediate network and possibly making some good friends along the way as well. We don’t recommend Liveblogging a day at the office, but a day that your company spends at a trade show or a Liveblog of an industry conference are great ways to show people you are immersed and interested in your industry. By the time you’ve checked out any LiveBlogging software you’ll probably want to go to a trade show or event just so you can liveblog it.

How Will LiveBlogging Change Blogging?

A Liveblog of an event will get more hits the day of the event than any other time. Let’s face it, we are a society of instant media gratification junkies and this provides an instant fix. Liveblogging won’t replace traditional blogging, but it may encourage it to become lengthier and meatier than it has been in the past.  Instead of offering just the quick breakdown that the Liveblog offers, bloggers will have to inject more qualified statistics and observations in their post-event content to make people want to read their posts in addition to the Liveblog coverage.

My first exposure to LiveBlogging came from Stephen Del Percio, an environmental real estate lawyer who runs his own blog at greenbuildingsnyc.com. Stephen LiveBlogged GreenBuild, an environmentally friendly building conference. What I found interesting about his LiveBlog is that I kept receiving his updates real time through my Twitter feed, which was both interesting and exciting. It made me feel like I was at an event that I would have loved to have gone to.  I asked him how he was doing it and he responded with a url: www.coveritlive.com.

Cover It Live

While there are a number of Liveblogging platforms out there, Cover It Live is one of the best known and most widely used. It is also completely free. Their rationale is that they are live testing the platform before they start charging for the service. Cover It Live is far from a beta, although those at 2008’s MacWorld conference would probably beg to differ. Despite this somewhat epic fail, the Cover It Live service has worked reliably for other news outlets and bloggers quite well. Readers can post comments and questions in real time on your LiveBlog, making it a truly interactive experience.

Signing up for Cover It Live is just like signing up for any online service. Once you’ve entered your details, you’ll get a box like below giving you the code to cut and paste to put in your site. You can see that we’ve checked the WordPress code, which simply gives you a link instead of an iframe. Note the huge warning at the top of the screen that you can only use Firefox 2.0 plus or Internet Explorer 6.0 plus to use Cover It Live; any browser may be used to view your Liveblog but Safari users must sadly switch.

The Additional Options box below the code gives you some interesting things to do. You can add Twitter users, although this is a tedious process of going in and adding a bunch of Twitter user names. Here’s hoping in the next version you can just put in your user name and it will automatically just import all of your followers. This will mean that all of your liveblogging will go out to your Twitter users as tweets, something to keep in mind when you are actually liveblogging – try to make sure some of your transmissions are under 140 characters to keep it interesting for them – if not don’t worry about it, as they can just go to your live blog to read it if they want more.

You can also e-mail your readers, enter the address of the Liveblog, and get the code for a “Coming Soon” reminder to add to your site. All very cool stuff.

Launch Your Live Blog

The interface is extremely fluid and easy to use. It has the feel of a more advanced instant messaging client.  You can go from inserting emoticons to streaming video and audio alongside your liveblog. This is how it looks to you:

This is how it looks to the world:

 

If you want to customize the Live Blog window, you can do so in the “Custom Templates” menu that you access from your Account area. You simply sign in, go to “My Account” and then click on “My Viewer Window”. This will then give you a few options, including uploading a background image (which must be 380 pixels by 150 pixels).

If you are embedding the code in WordPress, it simply gives you a link to a popup window rather than a window that embeds the Liveblog on your site.

If I were using Cover It Live on a WordPress site, I would take a screenshot of the Live Blog and include a thumbnail image in the link in order to make it more attractive. If you are installing it in a website, use of an Iframe makes it more accessible and readable within the site itself without needing to click on a link as you have to in a WordPress blog. If you are planning on making extensive use of Liveblogging, you may want to consider the addition of a static page specifically for your Live blogs in order to incorporate the iframe.

Panelists

One of the more exciting features of Cover It Live is the ability to have multiple citizen journalists, or Panelists in the Cover It Live world.  ou can all contribute to the same LiveBlog without risk of anything crashing. This allows you to function as a team, with some people hopefully adding content that others may miss.  For any events that are happening live, such as the US election, this is an excellent tool to have a live conversation about an event among people in different geographic locations.

Tools & Settings

The Tools menu covers some basic items, such as getting embed code in order to embed your LiveBlog in a website or blog. It also features the important Live Edit, which lets you go back and edit items live that you feel that you made mistakes on. You can also view reader statistics in real time, which can be encouraging or discouraging depending on who shows up. You can also invite more readers via e-mail, although you probably want to do this in advance of the event.

 

The Settings menu allows you to show and edit both your Panelists and Twitter users. In both cases, you are best advised to set these up before you start, but the options are there for you to add them on the fly if you need to. You can also disable reader comments, something to consider if you want the entire LiveBlog to be about what you are writing instead of having attention drawn away to the comments of readers.

Media Library & Video

The Media Library is a very powerful tool that allows you to add multimedia to your live blog. You can insert ads on the fly, links to other sites, and create polls. You can also insert text that you have prewritten and post video and audio within your live blog. ShowPrep is a feature within the media library that allows you to create a playlist for your media prior to your Live blog and it functions much like iTunes. While the media library allows you to organize your multimedia, ShowPrep allows you to further organize it by allowing you to organize your media in advance of your presentation. Keep in mind when uploading images that you are limited to a size of 25 mb per image.

You can post both live video and video that you find on YouTube. In order to incorporate live video, you need to use one of three services; USstreamTV, Mogulus, or Qik. This will allow you to live stream an event that you are attending, if you have received the proper permissions from the people holding the event to do so. When you drop the video link into your live blog, your users will see a small window that they can move around and resize however they wish.

 

How to Liveblog Effectively

Now that you understand how to use everything and have booked yourself in at a conference or event, lets go over the ins and outs of Liveblogging:

Ensure Internet access
If you are working a trade show or attending a presentation in a cavernous building, you may actually not have wireless internet access. Contact the event staff in advance to arrange for proper internet access in order to stave off disaster – it really isn’t a Live blog if you’re not, well, blogging live. If disaster strikes, call a friend and have them put up a notice that you are experiencing difficulties on your Live blog.

Scheduling most popular events
Arrange your time at the event so that you are blogging presentations that you know will be popular. At a Search Engine Marketing event, more people are going to want to hear Matt Cutts from Google speak than Joe Schmoe from Klamath, Oregon no matter what the subject is. Treat the event like it is a collection of websites and go to the presentations that you have mentally assigned the highest Pagerank to. Then publicize the events that you will be Liveblogging on your company website or blog.

Promote it
Notify the event organizers and see if they will put up a link to your Liveblog from their website, unless you are attending something like MacWorld where LiveBloggers are a dime a dozen. If there are a number of you, spread out and try to cover all of the events and presentations – don’t all blog one event or speaker. Use your numbers to cover more, not jaw about the same presentation together online.

Use images
Pictures are a great adjunct to your Liveblog. Clear the use of digital cameras and recording devices with event staff beforehand. If you can record live video or audio, that would be ideal. Don’t use live video or audio as a substitute, but post it alongside your Liveblog. You can go back afterwards and cut out the more interesting bits to post on your website later. This will also cement you as a professional in the eyes of anyone viewing your Liveblog.

Follow up
Don’t forget to go back over your Liveblog later and use it as research material to put together more cohesive blog posts for your website. It can be argued that a Liveblog may at the very least have a place as a research tool if you aren’t comfortable in broadcasting the results online quite yet. As with everything, there’s no time like the present to try it out.

The most important thing is to not be afraid to make a mistake. Most platforms feature a live edit feature, including Cover it Live. If you misspell something or get something a speaker said wrong, don’t sweat it – just edit it and move on. Once you step into the world of liveblogging, you probably wont’ be able to go back.

Written exclusively for WDD by Angela West and edited by WDD.

• Social media sites and technologies like Twitter and Digg are something that the tech savvy take completely for granted.  We just automatically assume that if you are on the Internet, you are using social media. This isn’t really the case. There are some very important people that are not yet aware of social media and what it can do – your clients.

  Social media is definitely a source of new income for you as you have the opportunity to go back and update your old clients to current technologies.  The foundation-laying for social media came in 1999 when Rick Levine and others wrote the Cluetrain Manifesto.  This manifesto lays out simple rules for online markets and social media.

   

  Cluetrain Manifesto – see Cluetrain.com for more.

  Interaction and Your Clients

  Gone are the days where an e-mail newsletter and an occasional site update were enough to assuage the information junkie consumer.  Now people want up to the minute interaction, with live help on websites and Twitter updates from the CEO whenever they can get them.  While you know the power of interactive marketing, the guys in the boardroom may not yet “get it“.  It is up to you to make them get it.

  The best argument that you can make for social media is that it is replacing traditional SEO practices.  Gone are the days when a link from a highly pageranked site got you some street cred with Google – although that still doesn’t hurt – now it is all about how many Diggs your content gets.  The key argument is that traditional SEO work is now not enough – it needs to be supplemented with social media.

  There is a bit of a fear surrounding social media for companies that like to “stay on message”, or in other words not give the public a forum to air complaints about its products or services.  Your argument here is that by giving the customers that forum, your business is extending an open hand in friendship to its clients.  This hand will rarely get slapped away unless you are dealing with a really irate client base, in which case you probably won’t have a business for much longer anyway.

  There is more to be said for allowing your business to be interacted with online than there is to be said for the time lost.  In the end, employees will be communicating with customers so it isn’t really time lost.  We spend too much time in business on hunting new prospects and not enough farming our current customers.  If we aren’t careful, another business will be happy to come along and pick up that slack.

   

  How to Start Marketing Social Media

  If your past clients do not yet have a social media strategy, it is time to present them with one.  If you don’t already have an e-mail newsletter set up to go out to all of your clients, go set that up.  We’ll wait.  Don’t forget to add a “join my newsletter” page or link to your site as well.  Send out an e-mail newsletter talking about how you would like to update their sites with access to Twitter, Digg, Facebook and other social media technologies and sites.  Determine what is within your scope and develop a social media package that you give past clients a discount on.  Make sure it is a clear and decisive package that is priced reasonably enough to be accessible.  We’ve developed one here below that you can price out at whatever you think is reasonable.

  Once you have created it, include it on your website as a new product.  Simply having it available will give you an “edge” over other web design companies.  Web designers aren’t the only tech-savvy people on earth and those who already use Twitter and Digg are more likely to call your company than another if you have these technologies showcased on your site.  Not only does it give you a new item to sell, it gives you a bit of variation – you’ll probably look forward to your social media projects quite a bit when you start getting them.

  Suggested Social Media Package

  Core Package – Must-Haves

  • Make key content of website “Bookmarkable” on social bookmarking sites like Digg and StumbleUpon.  Price per page.
  • Remember that E-mail newsletter thing?  Make sure they have it too.
  • Create Facebook Group and Facebook Page for your business
  • Set your business up on Twitter
  • Add a WordPress blog to your site
  • Training for your staff on updating Facebook, Twitter, and your blog

  Add-Ons – Nice-to-Haves

  • Set up your site to display live Twitter feeds
  • Create a social media press release template for the public relations department.
  • Create a YouTube page with introductory videos
  • Add Live Help component to site
  • Find online communities for employees to join and prepare a report with your suggestions.

  The various features above can add up, so you want to package your Social Media kit like a Chinese Food menu – allow deletions and substitutions.  Just make sure that you have adequately priced out each component so that you do not leave yourself holding the bag on hours worked.  There are also a few key items you can’t leave out, which is why we have separated out the core package from the add-ons.  All of the components in there are necessary unless your client is just adamantly against it – in which case all you can do is present them with this article and move on if they still don’t want it.

   

  How to Not Set Up a Social Media Package.

  You should also make it clear that your package is to initially implement a technology, not to maintain it.  While this may create a good income stream for you, social media maintenance isn’t like site maintenance – it is very time consuming and best left up to the company that wants to use it.  You have nothing to offer someone who is asking you for a quote on dog grooming – only the dog grooming company that hires you can answer that kind of question.  Make sure that your client knows that you are there for them if implementation falls down, but that they have the responsibility of updating things like Twitter and their blog.
  
  

  Social Bookmarking Site-Ready

  Your clients will ask what a social bookmarking site is.  The best way to explain it to someone who doesn’t know is to ask them if they know how to Favorite or Bookmark a site in their browser.  Most will say yes.  Digg and other social bookmarking sites simply serve as a website that acts as a more organized Favorites list, allowing you to tag an article for reading later, or a useful resource to come back to later.

  A good argument could be made for going back and making every single page of website content on your client’s site “Diggable”.  However, this would be somewhat time consuming.  Best to make a few key pages “Diggable”, such as a company’s environmental policies, key product pages and press releases.  Basically anything that you consider “Diggable” material should be “Diggable” to the public.

  Don’t forget to make the page accessible to more than just Digg.  There is a fine balance to walk here – you don’t want to saturate the web visitor with choices of too many social media outlets.  You can use a script called “Bookmarkify” that allows to choose which social media outlet icons show up below the content and which can be expanded on from a menu item.

  It allows access to all social bookmarking sites but allows you to show just a few on your page.  It is available for PHP and as most of you already know, you simply need to give the page that you are putting it on a “.php” extension in order to insert the script.

  

  Setting Up a Blog

  While it isn’t instant gratification for the consumer, a blog and weekly updates to that blog keep customers coming back to your site.  That and they can be marketed on directories that are reserved exclusively for blogs, including Technorati and Blogarama.  Having a Technorati authority is quickly becoming just as important as a Google pagerank and you simply cannot have it without a blog.  After minimal staff training, company staff should be able to update the blog using WordPress or a similar blogging platform.  Do yourself a giant favor and don’t use Joomla – it’s a huge headache and not user-friendly enough for your clients to use.  Play around with both if you like but really, just save yourself the time and go with WordPress for client sites.

  The blog shouldn’t be all about company specials and company products.  It should cover related industry news and topics that you know are important to your demographic.  A company selling investments for seniors may post activities for seniors, a daily crossword or sudoku puzzle, and profiles of healthy and active seniors.  If you are offering good, hard information, you can plug your product about once a week.  Try to keep it to news and updates about your products or your company rather than straight out promotions unless you are cross-promoting with a company wide campaign.

  Social Media Press Releases

  There’s a new press release in town.  A social media press release gets your message out to traditional outlets and social media with the simple click of a button.  It incorporates RSS feeds, social bookmarking sites, and many other features.  I could go on about it for a while but it is best just to direct you to a template for it where it is fully explained.

   

  
  Creating a YouTube Page

  If your client has television commercials or video of any kind, you’ll want to set up a YouTube page for them.  For a basic page, this takes the form of a simple YouTube account in the name of the company.  They can then customize their profile page with their own videos and gain subscribers.

  Links to the YouTube profile should be included in their site and blog.  Much like a Twitter page, you can customize the YouTube profile with background art and your own color scheme.  Machinima did a particularly nice job with this.

   

  If the company is willing, they can even bust out things like old training videos that you can have converted from VHS to digital.  The quality won’t be awesome but the vintage value may be something that the customers enjoy.  Anything that attracts customers to the company and doesn’t go too far off the wall is good.  Be careful when you are quoting out that you include pricing for converting VHS tapes to digital.  If you don’t have sufficient expertise in this area, find a freelancer to partner with on video.

• 

  Live Help

  Live Help should only really be implemented if the company makes a clear commitment of personnel to it.  There are often monthly charges for Live Help services and these can add up if there is no instantly recognizable return on investment for the company.

  Due to the charges, you may want to gear any suggestions of Live Help services towards the sales section of your client’s site rather than customer service.  Despite this suggestion, customers looking for service will still use the Live Help portion of the site, so the company should be prepared for that.

  Live Help is also only really good if your client is actively selling something online.  Sometimes a little hand holding is all a customer needs to gain the confidence to purchase from a particular company.  Live Help is particularly useful if your customer has customizable packages that they sell such as software packages or subscriptions with different components.

  If this describes your client, hook them up with any one of the Live Help services out there.  Simply do a search on Live Help and pick the one that you and your customer like best.  You can also ask your customer to pick out the one that they prefer, which may make more sense since they will be buying the monthly subscription.  Once they have selected their service, they can have you implement it on their site for them.  Some Live Help services even include free site implementation, so your services may not even be required.  Your client will appreciate the suggestion when their conversions increase.

   

  What Else Can I Do?

  Obviously the package put together above is meant as a start, not as a finish.  If you have a company that sells youth-oriented items, such as sports gear, you may want a MySpace profile as well.  You’ll notice the line about finding other directories and sites that your customer should be on.  This may involve adding them to directories or commenting on blogs with a link to their site.  It can be argued that this fits more into search engine marketing territory and should be charged out by the hour as ongoing work.

  Overall, it is easy to see where social media can become a huge profit center for web designers.  With it you will move your customers to the next level and prove that you can give them added value that nobody else can.  Except other people who have read this article!