With HTML5, video is now native to the browser. No longer is it isolated from the rest of your page trapped in a third party plugin. You can now style and script your video content much easier than before. And because it’s easier designers will I’m sure be concocting fancy new ways to present video content to the world.

With this in mind I had a little experiment with the new video element to see how the native player responds to some basic styling. All the browsers I tested performed well and seem to have quite robust video controls. Opera’s video controls (10.61) seemed to have the least robust UI when applying rotation to the player but apart from that it too performed admirably.

Keyboard access

What stood out for me though when doing these tests was the different ways browsers give the users control over video playback. In particular I noticed how limited keyboard access to the controls were in most of the browsers tested. Here is the skinny…

Opera had the best keyboard access, allowing a user to give focus to the video element by tabbing without the need for tabindex. Once in focus further tabbing allows the user to play/pause and control the volume using the cursor keys. The play head can also be focused but I cant work out why as the ability to scrub forward and back doesn’t seem to exist. One other small problem occurs when the video is the only focusable element on the page and focus becomes trapped on the volume control. In this situation I’d like to see focus loop around the individual controls again.

Firefox (3.6.8) also has good keyboard access and does not need tabindex to bring focus to the element. Once in focus the user can control play/pause (spacebar) and the movement of the play head in 15 second increments (left and right arrows). No default visual feedback was given to indicate focus. Firefox allows full screen viewing but this option is only given by the contextual menu. It would have been good to see this option on the controls.

Safari (5.0) has the best looking controls in my opinion but the keyboard accessibility is non existent as far as I can tell. Tabindex is needed to give focus but once in focus I could not get the video to play via the keyboard. There are also no controls in the contextual menu. In fullscreen however the player is fully controllable with the keyboard.

Chrome (5.0.3) also has no keyboard access but does have play, pause and loop control through the contextual menu.

All this HTML5 video stuff is so new and there are bound to be teething problems. So I’m not waging a finger disappointingly at any particular browser vendor. Instead I’m just sharing my findings in the hope that one day we will see some more consistent player behavior.

If keyboard accessibility is important to you you can of-course script your own controls for now. Remember don’t hate the player..

I call myself a user experience designer but I’m not massively confident in doing so. I first used the term “user experience” on my CV in 2000 and I’m confident in my ability to design and build solid usable websites that people engage with while meeting the needs of the business etc, but the job title UX designer doesn’t feel 100% right to me.

This is partly due to confusion over what a user experience designer does, not just outside the field but from within too. Much of the confusion arises from the title itself. You would assume from the title that we design user experiences but we don’t. Experiences are personal and different for everyone so cant be “designed”. Instead we design for the experience, the many parts that make up the experience. We design the user interface, the information architecture the interactions and even venture in to the murky world of strategy.

If it was up to me I’d call myself a web designer and have done with it. However UX design does seem to be a better umbrella term for what I do so I’ll roll with it for now.

Right I have a leak in my kitchen. I better call the utility infrastructure architect.

Oh and just be sure not to use the word “Ninja” in your job title unless you are an actual Ninja.

A coming soon page for hireFox. I used campaign monitor to collect the data.

But every time someone visits they trip up on this chunky thing of beauty. They don’t break their neck, its more of a stumble and steady yourself situation. This seems to happen to every visitor that comes to your house so what do you do? That’s right you fix the problem by getting a new thinner one.

Now imagine these people were letting themselves in and you didn’t actually see them trip. Because they haven’t broken any bones they probably wont bother to mention it to you. Seeing people trip and stumble prompts you to fix the problem.

Watching people use your site is just like this. Sometimes its just a few chunky doormats to deal with, other times its a door without a handle or a floorboard that rears up and slaps visitors in the face. The point is we often need to watch users to find these problems and most of the time a fix is as easy as getting a less chunky doormat.

Put simply YQL makes working with APIs much easier by doing all the hard work for you. All you need to get data back from a service such as Youtube or Flickr is a simple YQL query which would be recognisable by anyone who has basic knowledge of SQL.

I used YQL to create Apple Mad. Using YQL I grabbed a few Apple related blog posts, some delicious bookmarks tagged with “apple” and Apple related tweets from twitter. There’s not anything amazing happening here and I’ve still got some refining to do to make it more useful but the real point here is, from knowing nothing about YQL to putting this little site together only took a few hours. And most of that was me getting to grips with PHP (I’m a front end dude). I highly recommend looking into YQL, its a great way to easily get content from the web and display it on your site.

Further reading

• Yahoo! Query Language
• The YQL blog
• Christian Heilmanns blog

Here is what I came up with.

The HTML


<ul id="skills">
<li class="l-10">HTML <em>10/10</em></li>
<li class="l-7">CSS <em>7/10</em></li>
<li class="l-3">JavaScript <em>2/10</em></li>
<li class="l-6">PHP <em>2/10</em></li>
<li class="l-7">Ruby <em>2/10</em></li>
</ul>


As you can see I’ve got each skill in a list item with a score out of 10 placed in an <em>. Each list item has a class name that represent a score for each skill eg L-6 (“L” stands for level).

The CSS

With the CSS I want to hide the numbers and represent the score visually. I give the <em>’s widths to represent the scores. Each unit for this chart is 20 pixels. I then float the <em>’s to the left so they sit before the skill name then use text-indent: -200px to shift it outside the <em> and hide the score using overflow hidden. I use a single image to perform the role of divider every 20 pixels.


ul#skills {
list-style:none;
font-size:16px;
margin:0;
padding:0;
}
ul#skills li {
padding:5px;
margin:10px;
border:1px solid #eaf8d6;
background-color:#f2ffe1;
}
ul#skills li em {
float:left;
background-color:#C8FF9F;
display:block;
padding:0;
margin-right:10px;
overflow:hidden;
text-indent:-200px;
background-image: url('unit.png');
border-width:1px 0 1px 1px;
border-style:solid;
border-color:#8dc63f;
}

ul#skills li.l-10 em { width:200px;}
ul#skills li.l-9 em { width:180px;}
ul#skills li.l-8 em { width:160px;}
ul#skills li.l-7 em { width:140px;}
ul#skills li.l-6 em { width:120px;}
ul#skills li.l-5 em { width:100px;}
ul#skills li.l-4 em { width:80px;}
ul#skills li.l-3 em { width:60px;}
ul#skills li.l-2 em { width:40px;}
ul#skills li.l-1 em { width:20px;}


All I needed was just a simple visualisation, you could go further and add complexity by including values on the axis. Feel free to use it as you wish. Here is the demo page.

This wouldn’t be a real blog without a top 5 list now would it. So here is my “5 ways to inject some simplicity in to your site” post.

1. Simplify site objectives

Its easier to focus on a small number of tasks. This is important to remember during the planning and developing stage. Too many goals for a site and a project will soon spiral out of control without focus resulting in a finished product that is unable to deliver on any of its multitude of objectives.

2. Keep all stages of the project as simple as possible

Too many meetings and technical specs that are too detailed and hard to follow will bog down the development process. I’m no expert on project management, but a good project manager will try to avoid information overload and keep their team focused on attacking the core areas of a project to ensure the main user tasks of a site are addressed effectively.

3. Learn to recognise distraction

Common culprits of distraction are blogs, polls, forums, photo galleries and social media (yes I hate the term too). Some of these things can greatly benefit a company but generally speaking if your sites core focus is selling office stationary and not creating engaging content then a blog is probably going to be a distraction rather than a benefit.

More often than not these “secondary features” exist for SEO reasons. More content on the site means more keywords for search bots to pick up and in turn increase search rankings. But this practice just results in messy unstructured sites that become unusable and fail to get users to convert.

4. Keep control

Every piece of content should exist to help a user complete a task. If you work in a large company with many stake holders, you will need to keep tight controls on who can add/edit content, especially if that content exists in close proximity to a key call to action. Too much copy on a page and a call to action will become increasingly less obvious. As a result your site will become less effective.

Restrictions on editing content should be tighter the closer the user gets to completing a task. Nothing should distract a user from say the final click of a “place my order” button. This is not a place to up sell and inform them about other products and you certainly shouldn’t be showing them any banners. All you would be doing is giving them more opportunity to exit before they buy your product. The deeper a user travels down a funnel the simpler your content an UI should become.

Keeping an eye on conversion rates regularly will alert you to any problems in this area. You can even get Google Analytics to send you an automated alert if conversions drop bellow your normal expected levels.

5. Keep your guard up

You have a successfully simple site with clearly defined business goals and visitors are becoming loyal customers every day. But now you have a new challenge… avoiding bloat. Some new hot shot in the company wants a “new feature”. Even though the site is now live don’t be fooled into thinking the project is over. Be as vigilant about adding new features as you were during the planning stage. If its not core to the business and feels like a distraction for both the user and internal resources then just say no. Keep it simple stupid.

Making things look pretty is a skill that is becoming less important in a world focused on business goals, conversion rates and visitor retention. Clients now have a better understanding of the importance of online and as they become more savy, clients that once valued look and feel above all else are now expecting more from their sites. Sure all companies want a site to look good but more than that they want a site that meets the goals of their business.

• They want to be easily found
• They want to have high conversion rates
• They want loyal customers that return again and again

Designers who only posses visual design skills do not have what it takes to succeed as a web designer. As online business models become more sophisticated, so too has the role of the web designer.

These strategies focus on creating engaging, relevent content which often covers issues such as:

• themes, messages, voice and tone
• content channel distribution (newsletters, RSS etc)
• purpose of content
• content relationships
• search engine optimization

These are all great points to consider as part of a strategy but few strategies cover anything about removing old outdated content.

Out with the old

Good content managers will look to archive old news stories and completely remove out dated irrelevant content. Removing old content can be just as important as adding new material.

Even in companies where a solid content management strategy already exists, old content can pile up unchecked collecting virtual dust. Left unmanaged this content will drastically reduce the effectiveness of a website to meet the needs of a business.

Outdated content can be more visible than you think and will devalue fresh content by making the new stuff less likely to be read. A visitor reading old content is not consuming your new material.

Once a visitor lands on old content don’t relly on them to click through to more relevent information. Having a quick look at a “depth of visit report” in google analytics will tell you what percentage of people only view a single page on your site. Most sites record a high number for this metric. So this potential customer who was shown outdated content leaves the site without experiencing what a company has to offer and is likely never to return.

What stays and what goes

Does a certain older piece of content still provide value to the user? Only a user can answer this but you could have a wild guess. Or, better than guessing look at the analytics of that page. Look at the amount of traffic it attracts, look at it’s bounce rate and where they go to after?

Sometimes completely removing a page can be too drastic. If the page is pulling in good search traffic but resulting in a high bounce rate then modify the content to make it more relevant. Use that page to direct the user to more relevant content that still satisfies the users initial search request.

Dont try and entice a user to visit your site by keeping hold of irrelevant content in the hope that they remain on your site eventually converting. It wont work. Sure it will be an extra hit on your unique visitor metric but at the same time its probably going to help increase you’re bounce rate too.

Once you identify a page that needs removing make sure you also remove any internal links that might be pointing to it. This will ensure you wont be sending users down paths that dont meet your business goals. If you’ve set up good redirects and have good 404 pages, removing pages with outdated content will only benefit the users experience of your site.

Old news is still news.

News items should obviously not be removed completely but efforts should be taken to inform the user that they are reading older content and that there are far more relevant posts he could be reading instead.

Categorise this

If your site deals with categories for products or content then keep an eye on them, control who has the ability to add new categories (not just top level ones) and have a strategy to control the overall size of these categories. I know of sites that have more categories than products. Don’t be afraid of damaging your search engine rankings by removing nonsense categories that capitalise on popular search terms. Your users will thank you for it. If you have categories that are very similar merge them and use 301 redirects to ensure you don’t loose a user to a 404 page.

Removing or updating old content, monitoring your categories to avoid bloat are all steps to help improve the usability of your site. Be ruthless when it comes to removing the old stuff. If you where redesigning a site with the aim of simplifying its user interface then you wouldnt think twice about removing irrelevent visual clutter. And the same applies with content. Outdated content is noise that interferes with the signal, it will become an obstacle stopping your visitors becoming customers.

To learn more about content management strategy head over to A List Apart and have a look at the great content posted under the content strategy topic.