Rob Winters

Feeling inspired by a recent talk given by Bruce Lawson on HTML5 and CSS3 I felt inclined to have a play with what many see as the most exciting part of the next generation of HTML – video.

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’m not too fused about job titles but I’m fully aware of their importance within our fast evolving industry. They enable us to quickly understand what skill set a professional might have to offer. Some job titles are more fuzzy than others “social media expert” springs to mind and some are cut and dry “.net developer”.

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.

You’ve just bought a lovely new doormat for people to wipe their feet when they enter your house. Its a great looking doormat, nice and chunky with a witty welcome message.

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.

While working on a little side project I found myself in need of a really simple bar chart to visualise someone’s skill set. Nothing too fancy here just an unordered list and a bit of css. Read the rest of this entry »

I’m sure we all agree that simple, clean websites benefit users and business alike. Simple, clean sites benefit the user by making tasks easier to achieve. And of course if completing these tasks result in revenue for the business then everyone’s happy. But the problem is.. simple is sometimes bloody hard to achieve.

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.

Its clear that web design today covers a lot more than just visual design. An understanding of usability, accessibility, coding best practices and browser technologies is vital for today’s web designer.

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.